html - 在 div 中裁剪文本太长

Question

<div style="display:inline-block;width:100px;">

very long text
</div>

任何使用纯 css 的方法来剪切太长的文本而不是显示在下一个新行并且只显示最大 100px

Answer 1

您可以使用:

overflow:hidden;

隐藏区域外的文本。

请注意，它可能会剪切最后一个字母(因此最后一个字母的一部分仍会显示)。更好的方法是在末尾显示省略号。您可以使用 text-overflow 来完成:

overflow: hidden;
white-space: nowrap; /* Don't forget this one */
text-overflow: ellipsis;