如何防止文本溢出和被剪切?

问题描述：

我需要在伸缩框内使用斜体字体，但是由于溢出而导致文本被剪切.

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

我要输入文字的条件:

溢出一定不可见
不得剪切文本

这是我目前的情况(蓝色小框表示文本框的大小):

我想要这个:

如何实现?

我从此SO帖子中遭到了黑客入侵，但这是一个严重的问题，您可以在下面的代码段中看到.

I got an hack from this SO post but it makes a serious problem that you can see on the 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
}

<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>

答

尝试使用CSS letter-spacing 属性.

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; */
}

我经常使用 letter-spacing 来提高可读性.在这种情况下，它可能有助于防止中断.

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

参考:

16.4字母和单词的间距:字母间距和 word-spacing 属性

另一个可能的选择是为每个用户名添加尾随空格:

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

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

如果& nbsp; 太宽，则存在较窄的选项:

If   is too wide, there are narrower options:

稀薄空间:  (也是& thinsp; )
头发空间:

如何防止文本溢出和被剪切?

相关推荐