Break-word property in letters

Question

Let's say I have this Table:

<Table>
<td>
<tr>Hello World</tr>
</td>
</table>

When I resize my browser to a mobile size, I want the text in my table to break down, so it fits in the width of the mobile browser.

For now only words break.. like:

On big screen:

Hello World

When screen gets too small to fit both words in one line:

Hello
World

But when the screen gets even smaller, the word will disappear over the right side of the screen. Instead I want it to break down like this when the screen gets too small to fit the word:

HE
LL
O

WO
RL
D

I tried the CSS property: word-wrap: break-word; but it didn't work. Any ideas?

your html is wrong, first comes and then – Grasper Jul 08 '14 at 14:07 — Grasper, Jul 08 '14 at 14:07

score 2 · Answer 1 · answered Jul 08 '14 at 14:25

You want the following:

<table>
    <tr>
        <td>
            Hello World and some other textthatmaynotbreak
        </td>
    </tr>
</table>

table {
    border: 1px dashed blue;
}
td {
    border: 1px dotted blue;
    word-break: break-all;
}

Use word-break, not word-warp.

See demo: http://jsfiddle.net/audetwebdesign/u8rwj/

Reference: http://www.w3.org/TR/css3-text/#word-break-property

score 1 · Accepted Answer · answered Jul 08 '14 at 14:22

1

As @Grasper said, your html is wrong.

HTML:

<html>
    <table>
        <tr>
            <td>supercalifragilisticexpialidocious</td>
        </tr>
    </table>
</html>

This attribute is working for me in Chrome. CSS:

td {
    word-break: break-all;
}

answered Jul 08 '14 at 14:22

crusader92

50
1
8

You were the first to post the `break-all` solution... – Marc Audet Jul 08 '14 at 15:52

score 0 · Answer 3 · answered Jul 08 '14 at 14:08

0

you can do it with css when you aply

td{float:left}

answered Jul 08 '14 at 14:08

Grasper

1,293
12
26

Why float a table cell? – Marc Audet Jul 08 '14 at 14:29

score 0 · Answer 4 · answered Jul 08 '14 at 14:12

0

Try wrapping a div around the text, then by changing the div's width, perhaps with some js, you can accomplish what you want.

JSFiddle

HTML:

<body>
    <table>
        <td>
            <tr><div id="huh">Hello World</div></tr>
        </td>
    </table>
</body>

CSS:

#huh{
    word-wrap: break-word;
    max-width:2px;
}

answered Jul 08 '14 at 14:12

matt

121
4

This does not work as you shrink the width of the table, remove max-width and the table cell will remain a width just wide enough to enclose the whole words without breaking them. – Marc Audet Jul 08 '14 at 14:30

score 0 · Answer 5 · answered Jul 08 '14 at 14:29

0

Use this code

<table>
    <tr>
        <td>HelloWorldHelloWorld</td>
    </tr>
</table>

table{
    table-layout: fixed;
    width: 100%;
}
table td{
    word-wrap: break-word;
}

Demo: http://jsfiddle.net/5kSwn/

answered Jul 08 '14 at 14:29

amol

1,535
9
10

@Mark: I saw your solution, word-break: break-all; which looks to be a good solution for this. Thanks:) – amol Jul 08 '14 at 15:31
In your solution, using `table-layout: fixed` with `word-wrap: break-word` does the trick, so this works. However, if `table-layout: auto`, then `word-wrap: break-word` will not work, but `word-break: break-all` will work. So there are a couple of valid ways of getting the desired result. – Marc Audet Jul 08 '14 at 15:57

Break-word property in letters

5 Answers5