gpt4 book ai didi

html - 表示换行的首选位置

转载 作者:技术小花猫 更新时间:2023-10-29 11:28:18 24 4
gpt4 key购买 nike

假设我想在 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>

注意:它看起来像 CSS3 text-wrap: avoid 行为是我想要的,但我似乎无法让它发挥作用。

最佳答案

通过使用

span.avoidwrap { display:inline-block; }

并将我想放在一起的文本包裹起来

<span class="avoidwrap"> Text </span>

它将首先包装在首选 block 中,然后根据需要包装在更小的片段中。

关于html - 表示换行的首选位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5392853/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com