css溢出隐藏的几种方法实现介绍_F11 - 专业站长和开发者的学习网站

分享到

css溢出隐藏的几种方法实现介绍

css 来源：互联网作者：佚名发布时间：2024-02-25 21:44:25 人浏览

摘要

当容器中的文本内容超出容器的宽度或高度时，就会出现文本溢出的情况。下面介绍几种CSS实现文本溢出的方法。单行文本溢出省略单行文本溢出省略通常用于标题等文本显示，可以通过设置

当容器中的文本内容超出容器的宽度或高度时，就会出现文本溢出的情况。下面介绍几种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属性来实现。但是，text-overflow属性对于多行文本是不起作用的，需要结合其他属性来实现。

-webkit-line-clamp属性：用来限制显示的行数。

display属性：用来设置容器的display属性为-webkit-box，使其变成一个块级盒子。

-webkit-box-orient属性：用来设置块级盒子的排列方向为垂直方向。

代码示例：

<style>

.overflow {

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

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>

使用伪元素实现

通过伪元素在文本后面添加省略号来实现多行文本省略。

代码示例：

<style>

.ellipsis::before {

content: "...";

position: absolute;

bottom: 0;

right: 0;

padding-left: 10px;

background: white;

}

.ellipsis {

position: relative;

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>

您可能感兴趣的文章 :

原文链接 :

Tag : css(297)隐藏(10)

使用CSS实现多行文本擦除效果的介绍

今天来实现一个多行文本擦除的效果，有种经典咏流传节目中表演开始前阅读诗句的一些既视感，在工作中其实也遇到过这样的需求当时是
CSS中Position:Sticky不起作用的问题解决

sticky属性不生效：检查浏览器兼容性；检查是否指定了阈值；检查 Safari 的供应商前缀；检查祖先元素是否具有overflow属性集；检查heig
css通过子元素选择父元素的实现介绍

伪类:has选择父元素 1 2 3 4 5 6 7 8 td:has( .unfoldTable){ //可选中所有td下包含unfoldTable的class标签的td属性 color: red; } td:has( div){ //可选中所有td下包
css溢出隐藏的几种方法实现介绍

当容器中的文本内容超出容器的宽度或高度时，就会出现文本溢出的情况。下面介绍几种CSS实现文本溢出的方法。单行文本溢出省略单行文
flex布局子元素宽度超出父元素问题及解决方案

1. 第一次遇到这个问题的场景先看效果图，大家可以看一下下面的样式，很明显左边和右边的盒子我是给的定宽，但是被挤压了这个是我在
css3实现四周线条环绕流动效果

效果：代码： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
css实现边框流动的项目介绍

要实现一个边框流动的效果，可以使用CSS动画来实现。在HTML中，我们需要创建一个元素（例如div），并将其设置为具有一定宽度和高度的盒
CSS中设置文字下划线的几种方法介绍

一、CSS种使用 text-decoration 属性来设置文字的装饰效果，包括下划线。常用的取值： none：默认值，不设置任何装饰效果。 underline：设置文
CSS实现文字字体颜色渐变的三种方法介绍

第一种方法 1 2 3 4 5 6 /*实现文字颜色从红到黄的线性渐变效果*/ .gradient-text { background: linear-gradient(to right, #ff0000, #ffff00); /*设置渐变的方向从
CSS实现一个渐变色箭头的代码

产品希望在漏斗图的旁边，每一层漏斗边上加上一个渐变色的箭头，效果如下：实现网上大部分的箭头实现都是利用一个div来实现箭头躯干