How to prevent a text from overflowing AND from being clipped?

Question

I need to use italic font inside a flex box, but texts get clipped because of overflow.

Conditions I want for my text:

Overflow must not be visible
Text must not be clipped

This is my current situation (small blue box indicates text box size):

And I want this:

How can this be achieved?

I got an hack from this SO post but it makes a serious problem that you can see on the snippet below.

My current code here:

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>

Does this happen if you use a proper italic font rather than the browser faux italics? — Paulie_D, Aug 02 '16 at 14:38
@Paulie_D Windows default font supports italic properly, so yes. — Kagami Sascha Rosylight, Aug 02 '16 at 15:17
Not what I meant....I mean a properly designed italic font family? Not the `font-style:italic`..which is a whole different thing. — Paulie_D, Aug 02 '16 at 15:18
Haven't tried custom fonts as they are not in my scope. My JS application should use system default fonts for consistency sake. — Kagami Sascha Rosylight, Aug 02 '16 at 15:41

Michael Benjamin · Accepted Answer · 2016-08-02T15:47:22.883

2

Try using the CSS letter-spacing property.

It essentially adds padding before and after each letter.

.ellipsiswrap {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  letter-spacing: .12em; /* just enough to clear the last letter;
                            even .2em  doesn't look bad; */
}

I often use letter-spacing to improve readability. In this case, it may help prevent the cut-off.

Reference:

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

Another potential option is to add a trailing space to each username:

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

If   is too wide, there are narrower options:

Thin space:   (also  )
Hair space:

edited Aug 02 '16 at 15:47

answered Aug 02 '16 at 14:45

Michael Benjamin

346,931
104
581
701

`letter-spacing` seems work but is not really visually satisfying. Hmm... – Kagami Sascha Rosylight Aug 02 '16 at 15:27
Maybe a simple ` ` at the end of each username? Answer updated. – Michael Benjamin Aug 02 '16 at 15:48
` ` or `\u00a0` way can be an easy workaround. Thanks :) – Kagami Sascha Rosylight Aug 03 '16 at 01:15

score 0 · Answer 2 · answered Sep 29 '22 at 09:24

Does a simple padding-right not suffice in your case?
See example in the copied and changed code snippet below.

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
}
.paddingright {
  padding-right: .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>

<p>padding-right from Wilt:</p>

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

How to prevent a text from overflowing AND from being clipped?

2 Answers2

Linked