Pause zwischen HTML-Tags verhindern, während Pause in einem von ihnen erlaubt

Question

In einem Beispiel möchte ich das Wrapping innerhalb des Bereichs zulassen, aber verhindern, dass der Bereich zwischen dem Bereich und dem i unterbrochen wird (stellen Sie sich vor, es handelt sich um ein Symbol oder einen Tooltip) . Commonly ist es suggested, dass die Anwendung white-space: nowrap auf das äußere Element und white-space: normal auf dem inneren Element dieses Problem lösen wird, aber in meinen Tests, tut es nicht. Ich habe sogar versucht, eine   zwischen der schließenden span und der Eröffnung i setzen, und auch das funktioniert nicht zuverlässig (obwohl ich glaube, dass es außerhalb von Codepen funktioniert; Ich denke, es ist etwas Formatierung außerhalb meiner Kontrolle).

<div class="outer nowrap"> 
    <span class="allow-wrap"> 
    The quick brown fox jumped over the lazy dog 
    </span> <i>!</i> 
</div> 

Siehe Beispiele: https://codepen.io/bussemac/pen/WjJrba

würde ich es vorziehen, die nicht zu einem   wenn möglich zu verwenden, weil es im Team zerbrechlich und etwas, die andere Entwickler fühlt könnte leicht vergessen. Das Umhüllungselement ist kein Problem; jedes Szenario, in dem wir das verwenden würden, haben wir ein solches Element.

Answer 1

Könnten Sie das Symbol im CSS als Pseudoelement hinzufügen?

.outer { 
 
    width: 60px; 
 
    background-color: #ccc; 
 
} 
 

 
.inline-block { 
 
    display: inline-block; 
 
} 
 

 
span::after { 
 
    content: "!"; 
 
    position: absolute; 
 
}

<div class="outer nowrap"> 
 
    <span class="allow-wrap"> 
 
    1. The quick brown fox jumped over the lazy dog 
 
    </span> 
 
</div> 
 
<br /> 
 
<div class="outer nowrap"> 
 
    <span class="allow-wrap"> 
 
    2. The quick brown fox jumped over the lazy dog 
 
    </span> 
 
</div> 
 
<br /> 
 
<div class="outer nowrap"> 
 
    <span class="allow-wrap"> 
 
    3. The quick brown fox jumped over the lazy dog 
 
    </span> 
 
</div> 
 
<br /> 
 
<div class="outer nowrap"> 
 
    <span class="allow-wrap"> 
 
    4. The quick brown fox jumped over the lazy dog 
 
    </span> 
 
</div>

oder das aktuelle Markup zu halten, verwenden position: absolute auf das Symbol ..

.outer { 
 
    width: 60px; 
 
    background-color: #ccc; 
 
} 
 

 
i { 
 
    position: absolute; 
 
}

<div class="outer nowrap"> 
 
    <span class="allow-wrap"> 
 
    1. The quick brown fox jumped over the lazy dog 
 
    </span> <i>!</i> 
 
</div> 
 
<br /> 
 
<div class="outer nowrap"> 
 
    <span class="allow-wrap"> 
 
    2. The quick brown fox jumped over the lazy dog 
 
    </span><i>!</i> 
 
</div> 
 
<br /> 
 
<div class="outer nowrap"> 
 
    <span class="allow-wrap"> 
 
    3. The quick brown fox jumped over the lazy dog 
 
    </span><i class="inline-block">!</i> 
 
</div> 
 
<br /> 
 
<div class="outer nowrap"> 
 
    <span class="allow-wrap"> 
 
    4. The quick brown fox jumped over the lazy dog 
 
    </span><i class="inline-block">!</i> 
 
</div>

Answer 2

.outer { 
 
    width: 60px; 
 
    background-color: #ccc; 
 
} 
 
.no-wrap { 
 
    display: inline-block; 
 
}

<div class="outer"> 
 
    1. The quick brown fox jumped over the lazy <span class="no-wrap">dog <i>!</i></span> 
 
</div>

Setzen Sie das letzte Wort und das Ausrufezeichen zusammen in einem Bereich und geben Sie eine Anzeige von Inline-Block. Dies wird sicherstellen, dass es bei "Hund" bleibt.