Question

我们说我有这张表：

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

当我将浏览器的大小调整为移动尺寸时，我希望表格中的文字能够分解，因此它适合移动浏览器的宽度。

现在只有单词破解..喜欢：

在大屏幕上：

Hello World

当屏幕太小而不能将两个单词都放在一行中时：

Hello
World

但是当屏幕变得更小时，该字将在屏幕右侧消失。相反，当屏幕太小而不适合这个词时，我希望它能像这样分解：

HE
LL
O

WO
RL
D

我尝试了CSS属性：word-wrap: break-word;但它没有用。有什么想法吗？

Answer 1

您需要以下内容：

<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;
}

使用word-break，而不是word-warp。

请参阅演示：http://jsfiddle.net/audetwebdesign/u8rwj/

参考：http://www.w3.org/TR/css3-text/#word-break-property

Answer 2

正如@Grasper所说，你的HTML是错误的。

HTML：

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

此属性适用于Chrome。 CSS：

td {
    word-break: break-all;
}

Answer 3

尝试在文本周围包裹div，然后通过改变div的宽度，也许用一些js，你可以完成你想要的。

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;
}

Answer 4

尝试在文本周围包裹div，然后通过改变div的宽度，也许用一些js，你可以完成你想要的。

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;
}

Answer 5

使用此代码

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

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

演示：http://jsfiddle.net/5kSwn/

字母中的断字属性

5 个答案: