使用溢出时如何不裁剪最后一个字母:隐藏

Question

我给出了以下片段...

.container {
    width:500px;
    overflow:hidden;
    background:grey;
    font-size:40px;
}

<div class="container">
lfhukglisdufhglreiuhgldsfhujglsdfjhgreiluhgeliruhgsdlfhujgluirhg
</div>

有没有办法设置溢出：隐藏，这样它就不会在末尾显示半个字母？这是JavaScript的工作吗？

Answer 1

您还可以将height修复为仅包含一行，然后添加overflow-wrap: break-word; ^ref，以便如果无法完全显示最后一个字母，则只需换行：

.container {
  width: 500px;
  height:1.2em;
  overflow: hidden;
  background: grey;
  font-size: 40px;
  overflow-wrap: break-word;
}

<div class="container">
  lfhukglisdufhglreiuhgldsfhujglsdfjhgreiluhgeliruhgsdlfhujgluirhg
</div>