CSS实现文本显示部分内容，多余文本显示省略号

最新推荐文章于 2024-08-20 14:07:22 发布
最新推荐文章于 2024-08-20 14:07:22 发布
阅读量2.1k 收藏 2
点赞数 1
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Phoebe_16/article/details/78141903
版权
本文介绍了如何使用CSS实现文本显示部分内容，当内容过多时自动添加省略号。主要方法包括：1. 使用-webkit-line-clamp配合-webkit-box和-webkit-box-orient属性限制WebKit浏览器中文本的显示行数；2. 通过伪元素方法实现兼容其他浏览器的文本省略效果，同时提供针对IE6-7的兼容方案。
摘要由CSDN通过智能技术生成

1.显示一行文本内容，多余的内容用省略号显示

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

2.显示指定行数的文本，多余的内容显示省略号

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

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

最低0.47元/天 解锁文章
左岸16
关注
专栏目录
CSS -- 控制多出文本显示省略号
JYX8
04-01 1773
由于网页排版需要，有些地方过长的文本需要加省略号。比如，限制标签宽度为100px，超出宽度的部分就用神略号显示，如上图html标签： < label title =”控制多出文本显示省略号”>控制多出文本显示省略号CSS 样式：label { font-size: 14px ; display : block; width : 120p
css实现文本溢出显示省略号
01-19
不显示超过对象尺寸的内容，就是把超出的部分隐藏了；text-overflow：ellipsis;当文本对象溢出是显示…，当然也可是设置属性为clip不显示点点点；-o-text-overflow:为了兼容opera浏览器;*/width:200px;overflow:hidd
CSS隐藏多余的文字并用省略号显示
weixin_47492981的博客
05-20 637
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Document</title> <style> p { width: 120px; font-size: 12px; overflow: hidden; white-space: nowrap; text-ov
css文本只展示两行，多余的用省略号显示
qq_35478008的博客
08-20 456
【代码】css文本只展示两行，多余的用省略号显示。
CSS样式对太长的文字部分显示，鼠标移上全显示和文字换行
lyf_ldh的博客
08-25 5106
style="word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis" title="要显示的内容" 例如： <tr id="mytr" style="word-break:keep-all;white-space:nowrap;overflow:hidden;text-over...
纯css实现文字溢出部分显示为省略号
weixin_33815613的博客
04-10 330
在项目中常常遇到某段文字长度超出了设计的内容，对于溢出的文本需要处理成省略号，于是我就目前遇见过的情况总结一下。 单行，固定宽度 这种情况是最简单的。 &lt;p class="text"&gt; 你以为我会告诉你这一段文字已经超出长度了吗？ &lt;/p&gt; 复制代码以上面的一段内容为例子。 如果固定宽度为 100px,只需要显示一行。 代码如下： .text { ...
css示例展示部分标签语言
yooppa的博客
01-24 440
以下的代码演示 仅展示部分标签语言的用途： <style> table{ <!--border-collapse:collapse--> border-collapse: separate; width: 100%; } td{ width:25%; text-align:center; } tr{ border-bottom-
CSS强制文本在一行内显示若有多余字符则使用省略号表示
09-25
CSS（层叠样式表）提供了一种方法来强制文本在一行内显示，并且当文本超出容器宽度时，使用省略号（...）来表示被截断的部分。这个功能主要通过`text-overflow`属性来实现，它与`white-space`和`overflow`属性配合...
CSS文本超出指定宽度后隐藏并显示为省略号的实现方法
09-24
根据标题和描述，以及提供的部分内容，我们可以了解关于CSS文本超出指定宽度后隐藏并显示为省略号的实现方法，以及相关的知识点。以下详细说明： 1. CSS中实现文本溢出显示省略号的基本属性组合： - `text-...
【mark】单/多行文本内容溢出显示省略号…
01-07
一种常见的做法是当文本超出指定区域时显示省略号（...），以此来告知用户这部分内容被截断了。本文将详细介绍如何在不同场景下实现单行或多行文本内容溢出显示省略号的功能。 ### 一、基本概念 #### 1.1 溢出显示...
css控制只显示部分文字，防止表格撑开
Only the heart peace will be prosperity
05-09 370
##利用css+div控制只显示部分文字，效果是: 哈哈你好...   &lt;div         style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-left: 15px; width: 100px"&gt; ${myList.tNotice.noticeTitle} &...
CSS实现标题文字过长部分显示省略号的方法
01-19
前段时间在公司移动站的重构，遇到了一个产品列表title的需求是只显示两行，然后超过两行的字符用省略号显示。如下图的效果，当时第一感觉是这个需求只能通过后台输出的时候截取字符去处理，或者通过JS计算字符来处理，因为样式无法控制换行文本出现省略，但是因为我们新版的移动站是流式布局，在不同分辨率下的手机换行的宽度是不确定的，所以就没有标准的字符截取的数量范围。例如：15个字在iphone上面是两行显示，但是在三星上就可能不是两行显示了，有可能值显示一行，又或者在分辨率更低的手机15字已经是三行显示了，遇到了这种场景就很头痛了。先来回顾下，单行文本换行的写法： 复制代码代码如下:A20 Banana
css 常见样式
LiBo
08-25 414
/* 1、得是以配置为inline-block的元素，或默认以block呈现的div、p元素 2、强制不换行 3、固定宽度 4、超出部分隐藏 5、超出部分以'...'结尾 */ .test { border:1px solid #000000; display: inline-block; white-space: nowrap; width: 140px; overf...
css超过6行显示省略号，兼容所有浏览器最简便方法
小巧r的博客
04-18 1282
网上查了很多方法太墨迹，想到在移动端页面可以计算6行大概130个字，所以直接在js里截取130个字，之后加上省略号就可以了：
css文本溢出显示省略号（单行和多行文本）
qq_44862029的博客
11-01 261
css文本溢出显示省略号（单行和多行文本）
css 只显示几行，超出部分省略号
Xiaoxiao_Zheng的博客
07-15 492
需求：要求只显示2行，超出部分显示省略号 实现： css实现 1 常用的属性，超出部分显示省略号 overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 2 但是第三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？ css3解决了这个问题，解决方法如...
网页只显示一部分内容 其他内容用..替代
weixin_45988242的博客
03-03 1034
#table_ tr { font: bold 14px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #4f6b72; border-right: 1px solid #E2F5BC; border-bottom: 1px solid #E2F5BC; border-top: 1px solid #E2F5BC; letter-...
css技术点六：溢出的文字省略号显示
吮指原味鸡的博客
10-27 231
css技术点六：溢出的文字省略号显示一、单行文本溢出显示省略号二、多行文本溢出显示省略号 一、单行文本溢出显示省略号 /*1. 先强制一行内显示文本*/ white-space: nowrap; （ 默认 normal 自动换行） /*2. 超出的部分隐藏*/ overflow: hidden; /*3. 文字用省略号替代超出的部分*/ text-overflow: ellipsis; 二、多行文本溢出显示省略号 多行文本溢出显示省略号，有较大兼容性问题， 适合于webKit浏览器或移动端（移动
隐藏多余内容，使用...代替。CSS 样式 从前往后加载，需要有逻辑性
ASZJBGD的博客
09-13 332
 问题：设置样式时，样式的内容都正确时而没有效果？ 解决：查看样式的先后顺序。因为样式的加载时从前往后的（优先级高的先加载，同优先级从前往后。） 如果将overflow属性放在height之前，会使overflow属性失效，由于在从前往后加载时，如果先加载overflow而没有height时，是无法实现隐藏的，因为没有高度而控制高度是不存在的。 &lt;div style="width: ...
css 文本溢出显示省略号
最新发布
08-31
CSS 中文本溢出显示省略号的功能通常通过 `text-overflow` 和 `overflow` 属性配合使用来实现。当你设置元素的内容超出其容器时，可以控制如何处理溢出的部分。 1. `text-overflow` 属性：用于指定当文本溢出元素内容区域时的行为。常见的值有 `ellipsis`（显示省略号），`clip`（截断超出部分），以及 `hidden`（隐藏溢出内容）。 例子： ```css .text-truncate { white-space: nowrap; /* 防止换行 */ overflow: hidden; /* 如果内容溢出，隐藏多余的 */ text-overflow: ellipsis; /* 显示省略号 ... */ } ``` 2. `overflow` 属性：它定义了当内容超过容器尺寸时，多余部分是否可见。配合 `text-overflow` 使用，可以使文本溢出显示成省略号。 结合两者使用： ```css .text-truncate { display: -webkit-box; overflow: hidden; /* 隐藏超出部分 */ -webkit-line-clamp: 3; /* 只显示三行 */ -webkit-box-orient: vertical; /* 设置为垂直方向的多行盒模型 */ text-overflow: ellipsis; /* 当超出时显示省略号 */ } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值