Wie verhindert man, dass ein Text überläuft UND nicht abgeschnitten wird?

Question

Ich muss Kursivschrift in einer Flex-Box verwenden, aber Texte werden wegen Überlauf abgeschnitten.

Bedingungen Ich möchte für mein Text:

1. Überlauf nicht sichtbar sein muss
2. Text darf nicht

abgeschnitten Dies ist meine aktuelle Situation (kleine blaue Box zeigt an Größe Textfeld):

012 diese

Und ich will:

Wie dies erreicht werden kann?

Ich habe einen Hack von this SO post, aber es macht ein ernstes Problem, das Sie auf dem Schnipsel unten sehen können.

Mein aktueller Code hier:

body { 
 
    font-family: sans-serif; 
 
    font-size: 30px; 
 
} 
 
.ellipsiswrap { 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
} 
 
.italic { 
 
    font-style: italic; 
 
} 
 
.italicguard { 
 
    padding-right: 0.3em; 
 
    margin-right: -0.3em; 
 
} 
 
.usernamewrapper { 
 
    font-size: 1.2em; 
 
    overflow: hidden; 
 
    display: flex; 
 
    background-color: #303030; 
 
    color: #fff; 
 
} 
 
.opacity5 { 
 
    opacity: 0.5; 
 
} 
 
.screenname { 
 
    margin-left: 0.3em; 
 
    flex: 1; 
 
} 
 

 
.widthlimit150 { 
 
    width: 300px; 
 
} 
 

 
.widthlimit70 { 
 
    width: 140px; 
 
} 
 

 
.letterspacing { 
 
    letter-spacing: .12em 
 
} 
 

 
.wordspacing { 
 
    word-spacing: .12em 
 
}

<p>Original:</p> 
 

 
<div class="usernamewrapper"> 
 
    <span class="ellipsiswrap italic">username W</span> 
 
    <span class="screenname ellipsiswrap opacity5 italic italicguard">@username</span> 
 
</div> 
 

 
<p>Hack:</p> 
 

 
<div class="usernamewrapper italic italicguard"> 
 
    <span class="ellipsiswrap italicguard">username W</span> 
 
    <span class="screenname ellipsiswrap opacity5 italicguard">@username</span> 
 
</div> 
 

 
<p>Behavior that must be kept:</p> 
 

 
<div class="usernamewrapper italic widthlimit150"> 
 
    <span class="ellipsiswrap">username W</span> 
 
    <span class="screenname ellipsiswrap opacity5">@username</span> 
 
</div> 
 

 
<div class="usernamewrapper italic widthlimit70"> 
 
    <span class="ellipsiswrap">username W</span> 
 
    <span class="screenname ellipsiswrap opacity5">@username</span> 
 
</div> 
 

 
<p>Problem with the hack:</p> 
 

 
<div class="usernamewrapper italic italicguard widthlimit70"> 
 
    <span class="ellipsiswrap italicguard">username W</span> 
 
    <span class="screenname ellipsiswrap opacity5 italicguard">@username</span> 
 
</div> 
 

 
<p>letter-spacing from Michael_B:</p> 
 

 
<div class="usernamewrapper"> 
 
    <span class="ellipsiswrap italic letterspacing">username W</span> 
 
    <span class="screenname ellipsiswrap opacity5 italic italicguard">@username</span> 
 
</div> 
 

 
<p>word-spacing from Michael_B:</p> 
 

 
<div class="usernamewrapper"> 
 
    <span class="ellipsiswrap italic wordspacing">username W</span> 
 
    <span class="screenname ellipsiswrap opacity5 italic italicguard">@username</span> 
 
</div>

Answer 1

Probieren Sie die CSS letter-spacing Eigenschaft.

Es fügt Padding vor und nach jedem Buchstaben wesentlich hinzu.

Ich verwende oft letter-spacing, um die Lesbarkeit zu verbessern. In diesem Fall kann es helfen, das Abschneiden zu verhindern.

Referenz:

• 16.4 Letter and word spacing: the letter-spacing and word-spacing properties

---

Eine andere mögliche Option ist ein Leerzeichen zu jedem Benutzernamen hinzuzufügen:

<span class="ellipsiswrap italic">username W&nbsp;</span> 

Wenn   zu breit ist, gibt es schmalere Optionen:

• Thin Raum:   (auch  )
• Haar Raum: