您的当前位置:首页正文

文字溢出隐藏后添加省略号

时间:2023-11-27 来源:欧塔娱乐网

当我们想让文字溢出后隐藏并添加省略号的效果

在当前容器或父容器必须要设置宽度,否则代码会失效。?

.box{ width:50%; text-overflow :ellipsis;/* 文字隐藏后添加省略号 */ white-space : nowrap;/* 强制不换行 */ overflow : hidden;/*自动隐藏文字*/ width: 20em;/*不允许出现半汉字截断*/ } 

小编还为您整理了以下内容,可能对您也有帮助:

CSS如何实现单行和多行文本溢出显示省略号

在页面布局时,经常会遇到内容超出了盒子的情况,这个时候我们可以设置溢出的部分隐藏,还可以设置溢出的部分被截断,但一般情况下都是用溢出的部分显示省略号。这篇文章就和大家讲讲CSS如何实现单行文本和多行文本溢出显示省略号,有需要的朋友可以看看,希望对你有帮助。

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。

实现方法:

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;效果如图:

但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。

接下来重点说一说多行文本溢出显示省略号,如下。

实现方法:

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

overflow: hidden;效果如图:

适用范围:

因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;

注:

1、-webkit-line-clamp用来在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:

2、display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。

3、-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。

实现方法:

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}

p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;

background: -webkit-linear-gradient(left, transparent, #fff 55%);

background: -o-linear-gradient(right, transparent, #fff 55%);

background: -moz-linear-gradient(right, transparent, #fff 55%);

background: linear-gradient(to right, transparent, #fff 55%);

}

效果如图:

适用范围:

该方法适用范围广,但文字未超出行的情况下也会出现省略号,可结合js优化该方法。

注:

1、将height设置为line-height的整数倍,防止超出的文字露出。

2、给p::after添加渐变背景可避免文字只显示一半。

3、由于ie6-7不显示content内容,所以要添加标签兼容ie6-7(如:<span>?<span/>);兼容ie8需要将::after替换成:after。

uni-app 单行文字和多行文字溢出隐藏,溢出部分显示省略号

单行样式:

多行样式:我项目中用到的是两行,效果如下图

-webkit-line-clamp 用来*在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。
常见结合属性:

-display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 ,可去了解 CSS3 box-orient 属性
text-overflow: ellipsis;, 可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。

uni-app 单行文字和多行文字溢出隐藏,溢出部分显示省略号

单行样式:

多行样式:我项目中用到的是两行,效果如下图

-webkit-line-clamp 用来*在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。
常见结合属性:

-display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 ,可去了解 CSS3 box-orient 属性
text-overflow: ellipsis;, 可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。

html怎样让超出的内容显示为省略号

文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到,两种方法可以实现:一是用程序开截取字符长度,二是用样式来做。

css样式如下:

[css]

.css1{

color:#6699ff;border:1px #ff8000 dashed;

margin-bottom:20px;

width: 20em;/*不允许出现半汉字截断*/

}

.css2 {

overflow: hidden; /*自动隐藏文字*/

text-overflow: ellipsis;/*文字隐藏后添加省略号*/

white-space: nowrap;/*强制不换行*/

width: 20em;/*不允许出现半汉字截断*/

color:#6699ff;border:1px #ff8000 dashed;

}

[/css]

html代码如下:

[html]

<div class="css1">Web前端开发 – 专注于网站前端设计与Web用户体验</div>

<div class="css2">Web前端开发 – 专注于网站前端设计与Web用户体验</div>

[/html]

<st这yle type=”text/css”>

.css1{

color:#6699ff;border:1px #ff8000 dashed;

margin-bottom:20px;

width: 20em;/*不允许出现半汉字截断*/

}

.css2 {

overflow: hidden; /*自动隐藏文字*/

text-overflow: ellipsis;/*文字隐藏后添加省略号*/

white-space: nowrap;/*强制不换行*/

width: 20em;/*不允许出现半汉字截断*/

color:#6699ff;border:1px #ff8000 dashed;

}

</style>

<div class=”css1″>Web前端开发 – 专注于网站前端设计与Web用户体验</div>

<div class=”css2″>Web前端开发 – 专注于网站前端设计与Web用户体验</div>

web前端入门到实战:css实现单行、多行文本超出显示省略号

语法:

text-overflow:clip/ellipsis;

默认值:clip

适用于:所有元素

clip: 当对象内文本溢出时不显示省略标记(...),而是将溢出的部分裁切掉。

ellipsis: 当对象内文本溢出时显示省略标记(...)。

在使用的时候,有时候发现不会出现省略标记效果,经过测试发现,使用ellipsis的时候,必须配合overflow:hidden; white-space:nowrap; width:具体值;这三个样式共同使用才会有效果。

在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ;注意:这是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。

-webkit-line-clamp用来在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:

display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。

-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。

text-overflow: ellipsis;,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本。

这个属性只合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器

效果如图所示:

从效果上来看,它的优点有:

1.响应式截断,根据不同宽度做出调整

2.文本超出范围才显示省略号,否则不显示省略号

3.浏览器原生实现,所以省略号位置显示刚好

但是缺点也是很直接,因为 -webkit-line-clamp 是一个不规范的属性,它没有出现在 CSS 规范草案中。也就是说只有 webkit 内核的浏览器才支持这个属性,像 Firefox, IE 浏览器统统都不支持这个属性,浏览器兼容性不好。

使用场景:多用于移动端页面,因为移动设备浏览器更多是基于 webkit 内核,除了兼容性不好,实现截断的效果不错。

效果如图:

适合场景:文字内容较多,确定文字内容一定会超过容器的,那么选择这种方式不错。但文字未超出行的情况下也会出现省略号,可结合js优化该方法。

注:

css:

js:

网上有很多介绍关于使用JavaScript实现多行文本溢出省略的办法,有的使用插件,有的使用自己封装好的JavaScript文件,但是,我认为,还是自己写的js比较好用。

插件:

欧塔娱乐网还为您提供以下相关内容希望对您有帮助:

CSS如何实现单行和多行文本溢出显示省略号

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。实现方法:overflow: hidden;text-overflow:ellipsis;white-space: nowrap;效果如图:但是这个属性只支持...

js隐藏多行显示多行

显示省略号。js隐藏多行显示多行为显示省略号。多行溢出隐藏显示省略号功能的JS实现,在页面重构中,经常需要将过多的内容隐藏而显示部分,在单行文本中实现非常简单,但是在多行文本中,则需要根据实际选择不同的方式显示。

uni-app 单行文字和多行文字溢出隐藏,溢出部分显示省略号

-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 ,可去了解 CSS3 box-orient 属性 text-overflow: ellipsis;, 可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。

winform文本框超出后显示省略号

winform文本框超出后显示省略号第一步: 溢出隐藏。overflow: hidden;第二步:让文本不会换行, 在同一行继续。white-space: nowrap;第三步:用省略号来代表未显示完的文本。text-overflow: ellipsis;有一个TextBox文本控件...

如何用css使文本溢出边界显示为省略号

text-overflow: ellipsis;,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本。这个属性比较合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器 跨浏览器兼容的方案 比较靠谱简单的做法就是设置相对定位的...

html怎样让超出的内容显示为省略号?

/*文字隐藏后添加省略号*/\x0d\x0awhite-space: nowrap;/*强制不换行*/\x0d\x0awidth: 20em;/*不允许出现半汉字截断*/\x0d\x0acolor:#6699ff;border:1px #ff8000 dashed;\x0d\x0a}\x0d\x0a\x0d...

在标签中,想要实现文字超出就隐藏,CSS怎么写?

新建html文件,例如:index.html。2、在index.html中的标签中,输入css代码:li{width: 100px; white-space: nowrap;overflow: hidden;}。3、浏览器运行index.html页面,此时标签中超出的文字被隐藏了。

css单行文本溢出打点是什么?

最后就是它要显示省略号text-overflow:ellipsis;white-space:nowrap;/*文本不换行*/ overflow:hidden;/*溢出部分隐藏*/ text-overflow:ellipsis;/*溢出部分用“。。。”代替*/}#tourp{ white-space:nowrap;...

css里a标签所有属性都是超过一定宽度后隐藏并且变成省略号 。

cont{overflow: hidden;/*内容超出后隐藏*/}。4、为cont类添加内容显示为一行:white-space: nowrap; ,内容超出后显示为省略号:text-overflow: ellipsis; 。5、保存好代码后使用浏览器查看效果。

Top