8

例如，在这句话“Comment allez-vous ?”中，问号和句子中的最后一个单词用空格隔开。

当法语文本写在一个列中时，你经常会得到这样的结果：

Elle zigzague pour empiéter sur des impostures
? 杰奎琳波特机会。

换行发生在句子的最后一个单词和问号之间，这是不可取的。

Elle zigzague pour empiéter sur des impostures
? 杰奎琳波特机会。

有没有办法在纯 CSS 中解决这个问题？还是我们必须手动处理文本并将标点符号和单词包裹在一个不间断的跨度中？

4

1 回答 1

2

 在 HTML 或white-space: nowrap;CSS 中使用。

.sentence {
  width: 314px;
  border: 1px solid #eee;
}

.nowrap {
  white-space: nowrap;
}

.sentence > span {
  border-bottom: 1px solid darkred;
}

code {
  background-color: #ddd;
  padding: 0.2em;
}
<main>

<h3>Regular space</h3>
<p class="sentence">Elle zigzague pour empiéter sur des <span>impostures ?</span> Jacqueline porte chance.</p>

<h3>Avoid new line with non-breaking space HTML entity <code>&amp;nbsp;</code></h3>
<p class="sentence">Elle zigzague pour empiéter sur des <span>impostures&nbsp;?</span> Jacqueline porte chance.</p>

<h3>Avoid new line with CSS <code>white-space: nowrap</code></h3>
<p class="sentence">Elle zigzague pour empiéter sur des <span class="nowrap">impostures ?</span> Jacqueline porte chance.</p>

</main>

于 2018-12-23T23:51:21.100 回答