css 知识点记录

原创于 2017-11-07 15:12:24 发布 · 227 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用CSS实现多行文本自动截断的方法，并展示了一个简单的清除浮动的技巧。对于文本截断，通过设置特定的CSS属性如`text-overflow:ellipsis;`、`-webkit-line-clamp:1;`等，可以使溢出的文本以省略号形式显示，同时限制显示的行数。清除浮动方面，通过创建一个空的table单元格并设置`clear:both;`来达到目的。

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

1.多行文本截断

    width: 100px;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 1; /** 显示的行数 **/
    overflow: hidden;  /** 隐藏超出的内容 **/

2.清楚浮动

    display: table;
    content: " ";
    clear: both;