0

I need to allow word break/word wrap in the following structure :

<ul>
    <li><strong>Forename</strong><span>forename value</span></li>
    <li><strong>Forename</strong><span>forename value</span></li>
    <li><strong>Forename</strong><span>forename value</span></li>
<ul>

I can't fix a width to the span or li as the number of li's might vary. Making li to display as table-cell helps to word-break the span content like shown in the image.

enter image description here

  • Is there a way to make IE7 behave/understand table-cell ?

Edit :

My original problem is I'm trying to achieve a display like shown in the image below, but just that the content is getting cut at the right if long unbroken strings are given as input, instead of breaking the word.

  1. I'm wondering why word-break:break-all doesn't take effect unless when span is made block or inline-block ?

  2. Even when span is made inline-block, the next problem is how to make the subsequent content flow on the continuos line ?

Attached image : https://i.stack.imgur.com/1gB92.png

Any thoughts please ?

CodeTweetie
  • 6,075
  • 3
  • 19
  • 23
  • Take a look here [ie7-and-the-css-table-cell-property](http://stackoverflow.com/questions/249103/ie7-and-the-css-table-cell-property). There is a good solution with jQuery by @andy magoon – Morpheus Jan 16 '13 at 10:18
  • This does not look like a word breaking question; rather, it’s about styling a list as a table. Any practical reason not to use a `table` element? – Jukka K. Korpela Jan 16 '13 at 11:13

2 Answers2

0

You mean each of the three textblocks you have may not have more than 3 lines of text? If so:

<li style="height:100%;">
    <div style="width:100%;height:100%;overflow:hidden;">
         <strong>Forename</strong>
         <span>forename value</span>
    </div>
</li>

in this way the fourth text line that may be there won't be visible.

I do not support IE7 anymore since it takes a lot of time to make a website compatible with it and the IE7 usage is around 5% i saw at some statistics.

I just pop a window if a visitor is using ie7 with the message that they use a browser which isn't updated anymore since the end of 2008, which makes them vulnerable. And advice them to update to a newer version. If we all do that, we get rid of IE7 quickly.

Frankey
  • 3,679
  • 28
  • 25
0

You can try my demo in JSBin

You may check the white-space attribute of each span css to be sure that the value of white-space is normal, not nowrap - which prevent line-break;

Hieu Le
  • 8,288
  • 1
  • 34
  • 55
  • Thanks for the answer. But that's not the display I'm looking for. Also table-cell doesn't work in IE7. Thanks anyway. – CodeTweetie Jan 18 '13 at 12:56