html(+ css):表示换行符的首选位置
Jas*_*n S 101 html css word-wrap
假设我想在HTML表格单元格中显示此文本:
Honey Nut Cheerios, Wheat Chex, Grape-Nuts, Rice Krispies, Some random cereal with a very long name, Honey Bunches of Oats, Wheaties, Special K, Froot Loops, Apple Jacks
并且我希望该行在其中一个逗号之后优先打破.
有没有办法告诉HTML渲染器尝试在某个指定位置打破,并在尝试在其中一个空格之后断开之前先执行此操作,而不使用不间断空格？如果我使用不间断的空格,那么它会无条件地增大宽度.我希望换行符发生在其中一个空格之后,如果换行算法首先使用逗号尝试它并且无法使行适合.
我尝试在<span>元素中包装文本片段,但似乎没有做任何有用的事情.
<html>
<head>
<style type="text/css">
div.box { width: 180px; }
table, table td {
border: 1px solid;
border-collapse: collapse;
}
</style>
</head>
<body>
<div class="box">
<table>
<tr>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<td>lorem ipsum</td>
<td>
<span>Honey Nut Cheerios,</span>
<span>Wheat Chex,</span>
<span>Grape-Nuts,</span>
<span>Rice Krispies,</span>
<span>Some random cereal with a very long name,</span>
<span>Honey Bunches of Oats,</span>
<span>Wheaties,</span>
<span>Special K,</span>
<span>Froot Loops,</span>
<span>Apple Jacks</span>
</td>
<td>lorem ipsum</td>
</tr>
</table>
</div>
</body>
</html>
注意:看起来CSS3text-wrap: avoid行为是我想要的,但我似乎无法让它工作.
小智 147
通过使用
span.avoidwrap { display:inline-block; }
并包装我想要保持在一起的文本
<span class="avoidwrap"> Text </span>
它将首先包装在首选块中,然后根据需要包含在较小的片段中.
- 效果很好!只需补充一点注意:内联块的开头和结尾处的空格将被忽略,因此要按空格分隔块中的文本,需要将其放在内联块之间.例如,如果将spans设置为内联块,那么`<span> Hello </ span> <span> world </ span>`将是`Helloworld`,而`<span> Hello </ span> <span >世界</ span>`将是正常的'Hello world`. (15认同)
- @Lodewijk:`<wbr>`并不表示打破该行的*首选*位置,而是****. (8认同)
- <wbr>更具语义性,并在浏览器中保留控制权,这通常是一件好事.在这种情况下,它可以实现重要的突破. (2认同)
- 请注意，此技术也适用于嵌套的 `<span>`，因此您可以（实际上）指定首选断点的*层次结构*。 (2认同)
Ste*_*old 19
Dan Mall有一个非常简洁的RWD解决方案,我更喜欢.我将在这里添加它,因为有关响应式换行符的其他一些问题被标记为此重复.
在你的情况下,你有:
<span>Honey Nut Cheerios, <br class="rwd-break">Wheat Chex, etc.</span>
你媒体查询中有一行CSS:
@media screen and (min-width: 768px) {
.rwd-break { display: none; }
}
你应该做的事情（使用 Unicode 来实现它的目的）提供了最好的结果：
<table border="1">
<thead>
<tr><th>Method</th><th>Results</th></tr>
</thead>
<tbody>
<tr><td><wbr></td><td>Honey Nut Cheerios,<wbr> Wheat Chex,<wbr> Grape‑Nuts,<wbr> Rice Krispies,<wbr> Some random cereal with a very long name,<wbr> Honey Bunches of Oats,<wbr> Wheaties,<wbr> Special K,<wbr> Froot Loops,<wbr> Apple Jacks</td></tr>
<tr><td>U+200B Zero width Space</td><td>Honey Nut Cheerios,​Wheat Chex, ​Grape‑Nuts, ​Rice Krispies, ​Some random cereal with a very long name, ​Honey Bunches of Oats, ​Wheaties, ​Special K, ​Froot Loops, ​Apple Jacks</td></tr>
<tr><td>U+00A0 No‑break Space</td><td>Honey Nut Cheerios, Wheat Chex, Grape‑Nuts, Rice Krispies, Some random cereal with a very long name, Honey Bunches of Oats, Wheaties, Special K, Froot Loops, Apple Jacks</td></tr>
</tbody>
</table>小智 6
一个简单的答案是使用零宽度的空格字符， ​该字符用于在单词中的特定点处创建空格。
是否完全相反的的非破空间 （当然，实际上是字木匠 ⁠）（字木匠是零宽度版本不间断空格）
（还有其他一些不间断的代码，例如不间断的连字符 ‑）（这是对nbsp的不同“变体”的广泛回答）
如果您只想使用HTML（无CSS / JS）解决方案，则可以使用零宽度空格和不间断空格的组合，但这确实很麻烦，并且编写易于阅读的版本需要花费一些精力。
ctrl+ c，ctrl+ v帮助
例：
Honey Nut Cheerios,<!---->​<!--
-->Wheat Chex,<!---->​<!--
-->Grape‑Nuts,<!---->​<!--
-->Rice Krispies,<!---->​<!--
-->Some random cereal with a very long name,<!---->​<!--
-->Honey Bunches of Oats,<!---->​<!--
-->Wheaties,<!---->​<!--
-->Special K,<!---->​<!--
-->Froot Loops,<!---->​<!--
-->Apple Jacks
看不懂？这是没有注释标记的相同HTML：
Honey Nut Cheerios,​Wheat Chex,​Grape‑Nuts,​Rice Krispies,​Some random cereal with a very long name,​Honey Bunches of Oats,​Wheaties,​Special K,​Froot Loops,​Apple Jacks
但是，由于电子邮件html渲染尚未完全标准化，因此该解决方案不使用CSS / JS，因此对此类使用非常有用
另外，如果将此方法与任何<span>基于-的解决方案结合使用，则将完全控制换行算法
（版本说明：）
我能看到的唯一问题是，是否要动态更改首选破损点。这将需要对每个跨度按比例大小进行恒定的JS操作，并且必须处理文本中的那些HTML实体。
- 如果您要破坏的文本以某种方式被复制和解析，您可能会遇到问题 - 那么额外的数字可能会妨碍。如果您尝试破坏 @ 处的电子邮件，复制和粘贴将会失败，并且用户不知道为什么不这样做。如果您希望数据由爬虫程序读取或复制粘贴，我不建议使用此解决方案。 (2认同)