字母中的断词属性[重复]

Posted 2023-03-05

技术标签:

【中文标题】字母中的断词属性[重复]【英文标题】：Break-word property in letters [duplicate] 【发布时间】：2014-08-29 07:23:42 【问题描述】：

假设我有这张桌子：

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

当我将浏览器调整为移动设备大小时，我希望表格中的文本能够分解，使其适合移动浏览器的宽度。

目前只有单词会打断.. 比如：

在大屏幕上：

Hello World

当屏幕太小而无法在一行中容纳两个单词时：

Hello
World

但是当屏幕变得更小时，这个词会消失在屏幕的右侧。相反，当屏幕变得太小而无法容纳单词时，我希望它像这样分解：

HE
LL
O

WO
RL
D

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

【问题讨论】：

你的html错了，先是再 【参考方案1】：

使用此代码

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

table
    table-layout: fixed;
    width: 100%;

table td
    word-wrap: break-word;

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

【讨论】：

@Mark：我看到了你的解决方案，分词：break-all;这看起来是一个很好的解决方案。谢谢:) 在您的解决方案中，使用table-layout: fixed 和word-wrap: break-word 可以解决问题，所以这很有效。但是，如果table-layout: auto，那么word-wrap: break-word 将不起作用，但word-break: break-all 将起作用。所以有几种有效的方法可以得到想要的结果。【参考方案2】：

您想要以下内容：

<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

【讨论】：

【参考方案3】：

正如@Grasper 所说，您的 html 是错误的。

HTML：

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

此属性在 Chrome 中为我工作。 CSS：

td 
    word-break: break-all;

【讨论】：

您是第一个发布break-all 解决方案的人...【参考方案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;

【讨论】：

这不起作用，因为您缩小表格的宽度，删除 max-width 并且表格单元格将保持足够宽以包含整个单词而不会破坏它们。【参考方案5】：

申请的时候用css就可以了

tdfloat:left

【讨论】：

为什么要浮动表格单元格？

以上是关于字母中的断词属性[重复]的主要内容，如果未能解决你的问题，请参考以下文章