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

Question

For example, in this sentence, "Comment allez-vous ?", the question mark and the last word in the sentence are separated by a whitespace.

When French text is written in a column, you will often get something like this:

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

The line break happens between the last word of the sentence and the question mark, which is not desirable.

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

Is there a way to solve this in pure CSS? Or do we have to manually process text and wrap the punctuation and the word in a non-breaking span?

Answer 1

Use   in HTML or white-space: nowrap; in 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>