CSS3 text-overflow多行文本溢出显示省略号

最新推荐文章于 2023-03-15 09:16:59 发布
最新推荐文章于 2023-03-15 09:16:59 发布
阅读量879 收藏
点赞数
分类专栏： web前端学习 文章标签： text-overflow CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fayeni/article/details/81661320
版权

语法：

text-overflow：clip | ellipsis

默认值：clip

适用于：所有元素

clip： 当对象内文本溢出时不显示省略标记（...），而是将溢出的部分裁切掉。 
ellipsis： 当对象内文本溢出时显示省略标记（...）。

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

（规定段落中的文本不进行换行：white-space:nowrap;）

 

 

 

 

Fayeni
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS单行／多行文本溢出隐藏
小王的技术库
01-03 1万+
在日常开发展示页面，如果一段文本的数量过长，受制于元素宽度的因素，有可能不能完全显示，为了提高用户的使用体验，这个时候就需要我们把溢出的文本显示成省略号单行文本溢出多行文本溢出为大家准备了一个前端资料包。
text-overflow: ellipsis；单行，多行文本溢出显示 . . .
热门推荐
前端小狮的博客
04-11 3万+
常见的单行文本溢出显示省略号 写法：text-overflow: ellipsis;overflow: hidden;white-space: nowrap; <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></ti..
超实用, 用CSS实现多行文本溢出
weixin_42657666的博客
03-15 4554
用CSS实现文本溢出省略 在网页开发过程中，经常会遇到文本内容太长而导致界面布局不美观的情况。此时，我们需要对文本进行省略处理，以达到理想的布局效果。本文将介绍一个使用CSS实现文本溢出省略的方法。 方法一：使用text-overflow属性 text-overflow属性是CSS3新增的一个属性，它用于设置文字内容超出其容器时如何显示。通过设置text-overflow: ellipsis;即可实现文本溢出省略的效果，其中“ellipsis”表示显示为省略号。 下面是一个例子： div { width
多行文本溢出显示省略号(…)全攻略
未来水世界
02-17 395
大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; WebKit浏览器或移动端的页面 在WebKit浏览器或移动端（绝大部分是Web
多行文字text-overflow: ellipsis省略号失效问题
qq_51978639的博客
02-03 1290
设置了多行文字超出显示省略号的样式，省略号就是不生效，为此折腾了好久。 问题在于设置多行文字显示省略号时，只能指定显示的行数，不能设置高度
移动端的text-overflow多行文本溢出显示省略号(…)
12-10
在移动端，`text-overflow: ellipsis` 属性常用于单行文本溢出时显示省略号，但其本身并不支持多行文本的处理。本文将探讨如何在不同场景下实现多行文本溢出显示省略号的效果。 首先，对于基于WebKit的浏览器（如...
CSS省略号text-overflow超出溢出显示省略号
12-04
标题和描述中提到的“CSS省略号text-overflow超出溢出显示省略号”是指在CSS样式中利用`text-overflow: ellipsis;`来实现当文本内容超出指定容器的宽度时，用省略号表示被截断的文本。 `text-overflow`属性有以下几...
使用text-overflow:ellipsis实现溢出文本省略号显示无需js
09-25
总的来说，利用CSS的 `text-overflow: ellipsis` 以及相关的 `white-space` 和 `overflow` 属性，我们可以轻松地在不使用JavaScript的情况下实现文本溢出时的省略号显示，提高网页的性能和用户体验。同时，对于多行...
overflow超出显示_CSS实现单行、多行文本溢出显示省略号（…）
weixin_39638929的博客
11-29 565
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。实现方法：overflow: hidden; text-overflow:ellipsis; white-space: nowrap;效果如图：但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。接下来重点说一说多行文本溢...
超出的字符长度截取显示省略号(...) 按字节长度计算
kongjiea笔记
10-16 4966
function substrByLen(str,leng){ if(len(str) > leng){ var i = leng; while (len(str) > leng) { i--; str = str.substring(0,i); } str = str+"..."; } return str; }
CSS中的单行、多行文本溢出总结
前端学习博客
01-15 8780
文章目录一.用到的相关属性1.white-space2.word-break3.text-overflow:4.`overflow`二.单行文本溢出三.多行文本溢出 一.用到的相关属性 1.white-space 这个属性是用来控制空白字符的显示的，同时还能控制是否自动换行。它有五个值：normal | nowrap | pre | pre-wrap | pre-line。默认是normal。 ①white-space: nowrap: 不仅空格被合并，换行符无效，连原本的自动换行也没有了！只有<br
css小技巧
Chunxiliao的博客
04-09 120
1、单行文本溢出省略 .text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } overflow: hidden（文字长度超出限定宽度，则隐藏超出的内容） white-space: nowrap（设置文字在一行显示，不能换行） text-overflow: ellipsis（规定当文本溢出时，显示省略符号来代表被修剪的文本） 2、多行文本溢出省略 .text { display: -webkit-box; overfl
CSS 文本溢出处理（单行和多行）
http____的博客
12-18 1306
文章目录1 单行文本2 多行文本溢出 1 单行文本 html： <span>单行文本溢出处理</span> css： span{ display: inline-block; width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } span{ border: 1px solid black; } 效果图： 注意： 要配合width属性使
text-overflow: ellipsis; (多行文本溢出显示省略号)
baidu1023737029的博客
01-16 7552
width: 95%; margin: 0 auto; color:#4A4A4A; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; font-size: 13px
多行文本溢出显示省略号(…) text-overflow: ellipsis
weixin_30808575的博客
08-05 327
关于text-overflow text-overflow属性规定当文本溢出包含元素时发生的事情。 默认值： clip 继承性： no 版本： CSS3 JavaScript 语法： object.style.textOverflow="ellipsis" 语法：text-overflow: clip|ellipsis|string; ...
text-overflow:ellipsis在多行的实现。
AwayIsBlue
11-28 1414
以下代码实现了指定最多显示4行，超过4行的字，用...代替。<div class='wrapper'> <p class='text'>要指定行数的文本内容</p> </div>.text{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:
CSS文本溢出显示省略号
weixin_30706507的博客
12-30 276
项目中常常有这种需要我们对溢出文本进行"..."显示的操作，单行多行的情况都有（具体几行得看设计师心情了），这篇随笔是我个人对这种情况解决办法的归纳，欢迎各路英雄指教。 单行 语法 overflow:hidden; text-overflow:ellipsis; white-space:nowrap 示例 文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号 多行 ...
CSS实现单行、多行文本溢出显示省略号 …
huyao的博客
05-24 2万+
单行文本的溢出显示省略号overflow: hidden; text-overflow:ellipsis; white-space: nowrap;效果图：多行文本溢出display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;效果如图：适用范围：因使用了WebKit的CSS...
关于多行文本溢出容器时自动出现省略号无效：text-overflow
hacker9401的博客
12-26 824
首先容器一定要有固定的宽高，以下是css代码：     display: -webkit-box;     overflow: hidden;     text-overflow: ellipsis;     -webkit-line-clamp: 2; display: -webkit-box是必须要声明的，否则会无效，overflow: hidden表示超出容器部分隐藏，text-over...
css 多行文本溢出显示省略号
最新发布
09-15
要实现多行文本溢出显示省略号，你可以使用CSS的`text-overflow`和`-webkit-line-clamp`属性结合使用。 首先，你需要设置文本容器的高度和行数限制。例如，将容器高度设置为固定值，并使用`-webkit-line-clamp`属性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值