Question

我尝试在方案1中生成CSS换行符，但不在方案2中生成。在这两种情况下，文本都是从数据库中动态获取的，所以我不知道先验多长时间句子将是。

情景1：

This is the first sentence of a block.
This is the second sentence of the block, which is wide.

情景2：

This is the first sentence of the next example that
breaks. This is the second sentence of the block, which
is wide.

这只能用CSS吗？我目前通过在窗口调整大小上运行的JS代码来解决这个问题，但这很慢。

编辑：澄清这应该适用于动态文本长度。

Answer 1

只需在第一个场景中设置要阻止的句子，并在第二个场景中为文本容器设置固定宽度，如下所示：

.scenario1 {
  width: 100%;
}

.scenario1 span {
  display: block;
}

.scenario2 {
  width: 400px;
}

<div class="scenario1"><span>This is the first sentence of a block.</span> 
<span>This is the second sentence of the block, which is wide.</span></div>
<br />
<div class="scenario2">This is the first sentence of the next example that breaks. This is the second sentence of the block, which is wide.</div>

如果文本是一行，则CSS换行符，但如果超过1行

1 个答案: