Umbruch verhindern

[Rolf B]

Hallo nix,

das mit der Liste sollte unproblematisch sein, wenn man das Komma ans Ende der List-Items setzt, außer beim letzten.

Hier ist die Liste:
<ul class="inline">
<li>eins eins eins</li>
<li>zwei zwei zwei</li>
<li>drei drei drei</li>
<li>vier vier vier</li>
<li>fünf fünf fünf</li>
<li>sechs sechs</li>
<li>sieben sieben</li>
</ul>

Wichtig ist nur, dass vor den </li>-Tags kein Whitespace im Markup steht, sonst landet das Space auch vor dem Komma. Whitespace zwischen den Listenelementen und hinter den <li>-Tags sollte unproblematisch sein.

Das CSS dazu sieht so aus:

ul.inline {
  display: inline; padding: 0; margin: 0;
}
ul.inline li {
  display: inline;
}
ul.inline li:not(:last-of-type)::after {
  content: ",";
}

Einen Button und ein Fragezeichen zusammenzuhalten gelingt nach meiner Kenntnis nur mit zusätzlichem Markup. Die diversen Unicode Joiner-Zeichen greifen nicht.

<span class="keep-together"><button>ksdf</button>?</span>

.keep-together { white-space: pre; }

Rolf