How do I wrap text with no whitespace inside a 2020-01-24 11:07发布 站内问答 / HTML/CSS 1960 9 5

Question

I've used:

word-break:break-all;
table-layout:fixed;

and the text wraps in Chrome but not Firefox.

Update: I decided to change the design so it didn't need the wrap; trying to sort out a CSS fix/hack was proving too frustrating and time consuming.

Answer 1

For an automatic table layout try to style the concerned td combining the attributes max-width and word-wrap.

Eg: <td style="max-width:175px; word-wrap:break-word;"> ... </td>

Tested in Firefox 32, Chrome 37 and IE11.

Answer 2

Set a column width for the td tag.

Answer 3

One slightly hackish way of doing this is by processing the text to add space between each letter. Replace spaces with   Then use the letter-spacing css attribute to bring the spaces down.

I know, it's a hack... but if NOTHING else works, it should wrap without problem.

Answer 4

I'm using Angular for my project, and managed to solve this with a simple filter:

Template:

<td>{{string | wordBreak}}</td>

Filter:

app.filter('wordBreak', function() {
    return function(string) {
        return string.replace(/(.{1})/g, '$1​');
    }
})

---

You can't see it, but after $1 there is an invisible space (thanks @kingjeffrey for the tip), which enabled word breaks for table cells.

Answer 5

Try this, I think this will work for something like "AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGG" will produce

AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G

I have taken my example from a couple different websites on Google. I have tested this on ff 5.0, IE 8.0, and Chrome 10.

.wrapword {
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -webkit-pre-wrap; /*Chrome & Safari */ 
    white-space: -pre-wrap;        /* Opera 4-6 */
    white-space: -o-pre-wrap;      /* Opera 7 */
    white-space: pre-wrap;         /* CSS3 */
    word-wrap: break-word;         /* Internet Explorer 5.5+ */
    word-break: break-all;
    white-space: normal;
}

<table style="table-layout:fixed; width:400px">
    <tr>
        <td class="wrapword">
        </td>
    </tr>
</table>

Answer 6

Use CSS3 word-wrap: break-word;. Works in WebKit based browsers (Safari, Chrome) as well.

Update: I forgot, the element in question must however be either implicitly or explicitly positioned as fixed element or displayed as block element. For table cells (td), use display: inline-block;.