html 内联类型容器中文本溢出部分隐藏

原创于 2017-12-22 16:58:59 发布 · 644 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#span #文本溢出 #html

html 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用CSS来优雅地处理文本溢出的方法，通过限制文本宽度并结合使用`overflow`, `white-space`, 和 `text-overflow`属性实现。具体展示了如何使文本在超出指定宽度时显示省略号，同时保持整体布局美观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css部分

.smTextTitle{
width:70px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
display: inline-block; //将对象呈现为inline形式，但对象的内容作为block形式呈现，也就是说披着“inline”皮的“block”
}

html部分

<span
class="smTextTitle">子鼠丑牛寅虎卯兔辰龙巳蛇午马未羊申猴酉鸡戌狗亥猪</span>