如何实现溢出文本省略号

最新推荐文章于 2024-07-24 13:52:24 发布
最新推荐文章于 2024-07-24 13:52:24 发布
阅读量293 收藏
点赞数
分类专栏： 聚享小站 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wxq1308017/article/details/123105409
版权

背景

有时候为了页面美观，对于比较长的标题或简介内容，会希望溢出的内容用省略号代替。这么做虽然降低了用户体验，但是视觉上会比较整洁。

方案

单行文本溢出省略

  <p class="txt">这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介</p>

  <style>
最低0.47元/天 解锁文章
wmui
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
mui css 多行文本的溢出显示省略号(移动端)
肖肖肖丽珠的博客
03-29 1万+
一行超出就溢出隐藏 div{   overflow:hidden;   text-overflow:ellipsis;   white-space:nowrap; }     两行超出溢出隐藏 div{    overflow:hidden;    //前两个不变   text-overflow:ellipsis;   white-space:normal ！import...
面试官：如何实现单行／多行文本溢出的省略样式？
m0_50125215的博客
04-22 635
1.文本的溢出 在日常开发展示页面，如果一段文本的数量过长，受制于元素宽度的因素，有可能不能完全显示，为了提高用户的使用体验，这个时候就需要我们把溢出的文本显示成省略号 分成两种形式： 单行文本溢出 多行文本溢出 2.实现方式 2.1单行文本溢出省略 理解也很简单，即文本在一行内显示，超出部分以省略号的形式展现 实现方式也很简单，涉及的css属性有： text-overflow：规定当文本溢出时，显示省略符号来代表被修剪的文本 white-space：设置文字在一行显示，不能换行 overflow：.
如何让文字溢出自动变成省略号
weixin_44302838的博客
12-18 388
在你的p标签或者是什么上面加入这段代码 display:-webkit-inline-box; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical; /*方向*/ -webkit-line-clamp:2; /*显示多少行文本*/
文本溢出显示省略号
能能的代码日常
04-04 2万+
1. 单行溢出 使用text-overflow属性，并且要加width宽度属性 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 2. 多行溢出 1. WebKit内核和移动端的浏览器，使用CSS扩展属性 ``` display: -webkit-box; -webkit-box-orient: vertical; -w...
溢出的文字省略号显示
qq_43342124的博客
11-19 70
1 单行文本溢出显示省略号 /*1. 先强制一行内显示文本*/ white-space: nowrap; （ 默认 normal 自动换行） /*2. 超出的部分隐藏*/ overflow: hidden; /*3. 文字用省略号替代超出的部分*/ text-overflow: ellipsis; 2、多行文本溢出显示省略号（，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核）） /*1. 超出的部分隐藏 */ overf
使用text-overflow:ellipsis实现溢出文本省略号显示无需js
09-25
总的来说，利用CSS的 `text-overflow: ellipsis` 以及相关的 `white-space` 和 `overflow` 属性，我们可以轻松地在不使用JavaScript的情况下实现文本溢出时的省略号显示，提高网页的性能和用户体验。同时，对于多行...
css实现文本溢出显示省略号
09-25
主要介绍了css实现文本溢出显示省略号的方法和示例分享，推荐给大家。
css多行文本溢出时出现省略号的示例
09-24
当文本内容过多，无法在指定的容器内完全展示时，可以使用CSS技术来实现多行文本溢出时显示省略号的效果。这既保持了设计的整洁性，又确保了主要内容的可读性。本文将介绍两种实现这一效果的方法。 方法一：CSS技巧...
文字超出部分变成省略号的三种方式
热门推荐
weixin_51081257的博客
11-13 4万+
了解如何使超出盒子的文字变为省略号的三种方式，附上代码，直接复制就可以用，简单易懂，欢迎学习
当内容超出最大的长度的时候，使用CSS使文本显示省略号
涂作权的博客
01-06 3296
.description{  height:17px;  overflow:hidden;  text-overflow:ellipsis;  -webkit-text-overflow:ellipsis;  -o-text-overflow:ellipsis;  white-space:nowrap; }
文本溢出处理显示省略号
m0_73486305的博客
10-09 1万+
文本溢出处理显示省略号
网站基本布局CSS
m0_46608027的博客
07-24 491
* 滚动条轨道样式 *//* 滚动条样式 *//* 滑块样式 */
css实现线条中间高亮，左右两边模糊（linear-gradient的运用）
最新发布
贵林之恋的博客
07-24 150
效果： CSS实现边框底部渐变色的方法:(最简单的一种) 参考文章：CSS实现边框底部渐变色的4种方法_css下边框渐变-CSDN博客
CSS相关记录
oThrowsException的博客
07-24 501
它接受两个参数，分别表示在X轴和Y轴上的缩放比例。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。CSS的transform属性是一个功能强大的工具，允许你对HTML元素应用2D或3D转换效果，包括旋转、缩放、倾斜和移动等。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。scaleX()、scaleY()、scaleZ()：这些函数分别用于沿X轴、Y轴和Z轴缩放元素。
CSS 创建：从入门到精通
wjs2024的博客
07-24 195
CSS是网页设计和开发的重要组成部分。通过掌握CSS的创建和应用，您可以更好地控制网页的布局和样式，创建出既美观又实用的网站。不断实践和学习，您将能够熟练地使用CSS来实现各种设计效果。
CSS的常见难见
weixin_62432037的博客
07-24 725
选择器的优先级是指在多个选择器匹配同一元素时，决定哪个样式生效的规则。优先级越高的选择器，其样式越优先应用。
css方式实现文本溢出显示省略号
09-15
有多种CSS方式可以实现文本溢出显示省略号。以下是三种常用的方法： 方法一：使用text-overflow属性和ellipsis值 ```css div { width: 300px; border: 1px solid gray; white-space: nowrap; /* 让文本不折行 */ overflow: hidden; /* 让超出的文本隐藏 */ text-overflow: ellipsis; /* 超出的文本显示成省略号 */ } ``` 方法二：使用伪类选择器(::after)添加省略号 ```css div { width: 300px; border: 1px solid gray; white-space: nowrap; /* 让文本不折行 */ } div::after { content: '...'; /* 添加省略号 */ } ``` 方法三：使用伸缩盒子样式实现多行文本溢出显示省略号 ```css div { width: 300px; display: -webkit-box; /* 使用伸缩盒子样式 */ -webkit-box-orient: vertical; /* 让文本纵向排列，垂直显示 */ -webkit-line-clamp: 3; /* 省略号显示在第三行 */ overflow: hidden; /* 让超出的文本省略掉 */ } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值