表格单元自动换行不适用于斜杠答案

【问题标题】：table-cell word-wrap not working with slashes表格单元自动换行不适用于斜杠
【发布时间】：2013-04-29 11:42:06
【问题描述】：

我正在尝试将文本换行在固定布局中，但是当文本包含斜杠时它不起作用。

可以在不从 Javascript（纯 CSS）插入空格的情况下解决此问题吗？

jsfiddle:

Not working:
<div style="display:table; width:170px; background-color:cyan;">
    <div style="display:table-row">
        <div style="display:table-cell;word-wrap: break-word;">abfdbfdbfdb/dfbfdbdfbfbf/bdffbdbfdfbddfbdfbdfb</div>
        <div style="display:table-cell; width:34px;  background-color:red;">xxxxx</div>        
    </div>
</div>

</br>
Working:
<div style="display:table; width:170px; background-color:cyan;">
    <div style="display:table-row">
        <div style="display:table-cell;word-wrap: break-word;">abfdbfdbfdb dfbfdbdfbfbf bdffbdbfdfbddfbdfbdfb</div>
        <div style="display:table-cell; width:34px;  background-color:red;">xxxxx</div>        
    </div>
</div>

【问题讨论】：

为什么要使用 div 来存储表格数据？使用 TABLES..Funny world eh~ 人们将 div 用于表格数据，将表格用于布局
第二种情况起作用的原因是空格，而不是没有斜线。如果您删除空格并有一个长字符串（作为第一种情况），它也将不起作用。
由于性能原因，我没有使用表格。我知道对此进行了长时间的讨论，利弊..
如果我在第二个中删除空格，我会在一行中得到文本
@BogdanM。使用小表作为页面的一部分并不是性能杀手。性能损失来自使用表格来布局整个页面，这意味着浏览器必须在呈现页面之前遍历所有标记。一排两格的表格不是问题。通过使用 display: table、table-row 和 table-cell，您正在指导浏览器呈现表格，因此您实际上是在使用表格。表格在适当的时候很有用，无需避免使用。

标签： html css word-wrap

【解决方案1】：

在每次出现斜杠或其他应视为允许直接换行的字符后插入<wbr> 标记或零宽度空格&#x200b;。这些替代方案之间的选择有点complicated，但由于您的代码已经无法在旧版本的IE 上运行，您也可以在这里忽略它们，这将使&#x200b; 成为正确的选择。也就是说，你会写例如

abfdbfdbfdb/&#x200b;dfbfdbdfbfbf/&#x200b;bdffbdbfdfbddfbdfbdfb

问题在于字符级别，而不是样式问题。

不包含空格字符的字符串通常在换行中是不可分割的，并且应该是这样，除非您可以可靠地使浏览器在可接受的断点处中断或正确断字并使用分词。像word-wrap: break-word 这样的设置适用于特殊情况，当没有很好的方法来控制换行并且需要避免溢出时的紧急中断。

【讨论】：

这意味着我必须用 javscript 更改文本，对吧？最初的问题是如何在没有 JS 的情况下进行操作，而且我不需要在路径上使用连字符。我认为答案有点离题
如何修改 HTML 文档取决于上下文。修改它是正确处理包装的正确方法（如果需要包装；在大多数情况下，当人们将长路径名或 URL 放入可见内容中时，他们应该使用更正常的东西，例如短名称）。路径当然不应该连字符；相反，如果出现这样的字符，你应该确保它们没有在“-”之后被分割。 CSS不能处理这样的事情（现在或在可预见的将来）。
你拯救了我的一天！谢谢！

【解决方案2】：

将table-layout:fixed; 添加到“table” div 元素并为单元格分配宽度以使其断行：

JSFiddle

【讨论】：

是的，但我不想修复它，我想填补剩余空间
然后分配width: auto;，至少给它某种形式的宽度:) JSFiddle
第一种方法导致字符串在任意点被破坏；这在任何正常情况下都是不可接受的（例如，对于英语单词）。第二部分建议使用连字符的属性，引用 w3schools，总是一个不可靠的来源。特殊字符后连字符不会中断。
我不需要连字符，因为它是关于包装一些路径
断路也会破坏数据； foobar 与 foo bar 不一样（可以理解为两条路径），任意破坏使其打开是指哪个。