法语中某些标点符号前的空格：是否有 CSS 方法来避免换行？

Question

比如这句话，"Comment allez-vous ?"，问号和句子的最后一个字之间用空格隔开。

在专栏中写法语文本时，您经常会得到这样的信息：

Elle zigzague pour empiéter sur des impostures
? Jacqueline porte chance.

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

Elle zigzague pour empiéter sur des
impostures ? Jacqueline porte chance.

有没有办法在纯 CSS 中解决这个问题？或者我们是否必须手动处理文本并将标点符号和单词包装在一个不间断的范围内？

Answer 1

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

.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>

法语中某些标点符号前的空格：是否有 CSS 方法来避免换行？

Whitespace before some punctuation characters in French: is there a CSS way to avoid lines breaking?

css

punctuation

french