3

Consider the following example: 

.table {
   width: 50px;
   display: table;
  padding: 10px;
  border: 1px solid red;
}  

.table a {
  word-wrap: break-word; 
}

.table2 a {
  word-break: break-all; 
}  
<div class="table">
  <a href="#">doNotClickMedoNotClickMedoNotClickMedoNotClickMe</a>  
</div>  

<div class="table table2">
  <a href="#">doNotClickMedoNotClickMedoNotClickMedoNotClickMe</a>  
</div>

As you can see in first table word-wrap could not break the text to new line. But in second table word-break could break the text. As far as I understand from mdn articles on word-wrap and word-break the only difference between them is that word-break cause even chinese and japanese language text to break whereas word-wrap doesn't work on those languages. Now how come that word-break can break word in tables but word-wrap not? Does html css spec mention this behavior?

Reading some other similar posts like this, this and this, another thing that I found unordinary is why does adding table-layout: fixed to table allow word-wrap to break words?

Community
  • 1
  • 1
user31782
  • 7,087
  • 14
  • 68
  • 143
  • Seems like the behavior of `word-break` is different in firefox. I posted the question while using chrome. – user31782 Jan 16 '17 at 16:13

1 Answers1

0

The reason why table-layout: fixed worked here because for

table-layout: fixed :- The horizontal layout only depends on the table's width and the width of the columns, not the contents of the cells.(can cause an overflow in the cells if word-wrap:break-word is not set)

and for

table-layout: auto :- The column width is set by the widest unbreakable content in the cells irrespective of column width.

so the word-wrap:break-word which is now overflow-wrap:break-word( in CSS3 ) does not allow the content to overflow by breaking the contents as the table-layout: fixed.

The above explanation is partial for your question but I hope it will somehow help you.

Uday
  • 345
  • 4
  • 8
  • I appreciate your help. But to me the explanation is rather contradicting... _(can cause an overflow in the cells)_ seems to imply that text will overflow not wrap. – user31782 Jan 17 '17 at 07:36
  • Thank u, This line _(cause an overflow in the cells)_ means that if you set `word-wrap:break-word` then text will be wrapped otherwise overflow will occur in case of `table-layout: fixed`. – Uday Jan 17 '17 at 08:18