HTML+css 文字只显示一行

dayuanshi4405

于 2018-07-21 10:59:00 发布

阅读量634

点赞数

原文链接：http://www.cnblogs.com/yyr0208/p/9345909.html

版权

本文介绍了一种在电脑端和移动端使用CSS实现文本溢出隐藏的方法，通过设置行高、宽度、显示属性等，确保当文本超出指定区域时能够优雅地被截断并显示省略号。

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

电脑端

设置行高，超出隐藏

p{
    width: 80%;
    height: 16px;
    line-height: 16px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    white-space:nowrap;
}

移动端

p {
    overflow: hidden;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    display: box;
    display: -webkit-box;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}