css溢出隐藏的五种方法

简介: css溢出隐藏的五种方法

本文介绍了CSS处理文本溢出的两种方法:单行文本溢出省略,通过`white-space`和`text-overflow`属性实现;多行省略则需配合`-webkit-line-clamp`和`line-height`等。提供了相应的代码示例。

一、文本溢出

当容器中的文本内容超出容器的宽度或高度时,就会出现文本溢出的情况。下面介绍几种CSS实现文本溢出的方法。

单行文本溢出省略:

单行文本溢出省略通常用于标题等文本显示,可以通过设置white-space和text-overflow属性实现。white-space属性:用来设置元素中的空白如何处理,默认值为normal,即会自动忽略多余的空格和换行符。当设为nowrap时,文本不会换行。


text-overflow属性:用来控制溢出文本的显示方式,默认值为clip,即将溢出部分截去。当设置为ellipsis时,会显示省略号。

代码示例:

<style>
  .overflow {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
</style>
<div class="overflow">这是一段需要溢出省略的文本内容</div>

二、多行省略

多行省略主要是用来实现在固定高度的容器中,将超出容器高度的文本省略掉。同样,对于单行文本省略,可以使用text-overflow属性,但对于多行省略,则需要结合其他属性来实现。

使用纯文本实现

通过调整行高和高度来实现多行文本省略。

代码示例:

<style>
  .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 25px;
    height: 50px;
  }
</style>
<div class="ellipsis">这是一段需要省略的多行文本内容,如果文本过长会出现省略号</div>
目录
相关文章
|
8天前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
9 2
|
14天前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
15 3
|
28天前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
11 1
|
23天前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
21 0
|
2月前
|
前端开发 容器
css溢出隐藏的五种方法
css溢出隐藏的五种方法
|
3月前
|
前端开发 JavaScript 算法
CSS【详解】样式选择器的优先级(含提升优先级的方法)
CSS【详解】样式选择器的优先级(含提升优先级的方法)
86 0
CSS【详解】样式选择器的优先级(含提升优先级的方法)
|
3月前
|
前端开发
css 实用技巧 —— div在div中水平垂直居中(两种方法)
css 实用技巧 —— div在div中水平垂直居中(两种方法)
48 3
|
3月前
|
JavaScript 前端开发 容器
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
109 2
|
3月前
|
前端开发
css 实用技巧 —— 文字和图标垂直居中对齐(四种方法)
css 实用技巧 —— 文字和图标垂直居中对齐(四种方法)
1307 1
|
3月前
|
前端开发
你不知道的css——2. 百分比高度失效,绝对定位和非绝对定位元素的宽高百分比计算方法的不同
你不知道的css——2. 百分比高度失效,绝对定位和非绝对定位元素的宽高百分比计算方法的不同
43 1