在第n行文字末尾显示省略号

最新推荐文章于 2023-08-06 18:09:16 发布
最新推荐文章于 2023-08-06 18:09:16 发布
阅读量223 收藏
点赞数 1
分类专栏： HTML_CSS学习日志 CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42566993/article/details/108073437
版权

在第一行文字末尾显示省略号

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

如果想在第n行文字末尾显示省略号：

  • display: -webkit-box 将对象作为弹性伸缩盒子模型显示
  • -webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式
  • -webkit-line-clamp 限制一个块级元素显示的文本的行数
overflow: hidden;
display: -webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:n;
King_960725
关注
专栏目录
解决win10系统中C++程序调用DrawText时传入DT_ENDELLIPSIS仍然不显示省略号的问题
dvlinker的技术专栏
12-12 1184
经测试发现，我们PC程序在win10系统中运行时，个别窗口中显示文字的控件，在文字显示不下时并没有显示“...”省略号，但在win7系统是会显示省略号的。本文提出了一种解决办法
解决win10系统中调用DrawText时传入DT_ENDELLIPSIS仍然不显示省略号的问题
dvlinker的技术专栏
06-09 28
解决win10系统中调用DrawText时传入DT_ENDELLIPSIS仍然不显示省略号的问题
简单地通过CSS实现文字第n行后以省略号显示
qq_32142449的博客
01-05 240
仅需在需要显示指定行数的或其他标签的style样式里写上如下代码：        ｛overflow: hidden;       text-overflow: ellipsis;       display: -webkit-box;       -webkit-line-clamp: 3;       -webkit-box-orient: vertical;       }  
控制多少行显示 剩下内容用省略号显示
lihui61357457的博客
03-16 88
Sample Usage 引入clamp.js文件 //Single line $clamp(myHeader, {clamp: 1});//myHeader需要控制的元素 显示1行 //Multi-line $clamp(myHeader, {clamp: 3}); //Auto-clamp based on available height $clamp(myParagraph, {clamp: ‘auto’}); //Auto-clamp based on a fixed element heigh
笔记：css能做到文本超出第二行显示省略号
蚁族的奋斗的博客
10-11 383
.ellipsis{ width:100px; overflow : hidden;/*必须结合的属性,当内容溢出元素框时发生的事情*/ text-overflow: ellipsis;/*可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/ display: -webkit-box;/*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/ ...
css最后一行省略号,多行显示，超出部分隐藏，并在最后一行末尾部分添加省略号？...
weixin_35876682的博客
08-04 898
多行显示，超出部分隐藏，并在最后一行末尾部分添加省略号下面我的部分代码角色描述{{role.roleDesc}}.roleList-box .roleList-mask .config h3,.roleList-box .roleList-mask .config span{font-family: "PingFangSC";font-size: 14px;font-weight: 400;col...
单行文字、多行文字溢出时省略号表示的多种解决方式；调整字符间距；段落首字母大写缩进效果；
zhouzuoluo的博客
10-09 2636
文本溢出省略号表示的实现效果： 1、解决单行文字溢出： 解决方式： 在文字容器样式中添加 overflow:hidden; text-overflow:ellipsis; white-space: nowrap;  其中overflow:hidden;是在超出元素宽度范围时候不使用滚动条，text-overflow:ellipsis;表示在文本溢出时候使用省略号表示，white-spac...
Unity 实现文字过长显示省略号
纸箱猪的专栏
08-30 6505
需求：假设有一行文字由于界面空间不足只能显示一部分，那么剩余部分需要被截断，并且显示出来的文字末尾需要添加省略号“…”。比如“一二三四五六七八九十”，最终显示出来的样子是“一二三四…”。 这个需求在 CSS 中倒是挺好实现的。（题外话：这只限于显示出来的文字只有一行的情况。多行的情况下还是没那么容易，除非采用 WebKit 的 CSS 扩展属性 -webkit-line-clamp，不考虑兼容 ...
CSS 实现单行、多行文本溢出显示省略号（…）
VirgoYellow 的专栏
08-09 2829
1、单行文本溢出显示省略号 直接用 css 属性 text-overflow: ellipsis; 设置： { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 2、多行文本溢出显示省略号 直接用 css 属性 -webkit-line-clamp: n; （n是需要展示的行数）设置： { overflow: hidden; text-overflow: ellipsis.
Android 自定义指定省略号位置的TextView
louise_tsc的博客
08-06 397
Android 自定义指定省略号位置的TextView
多行文本最后行末尾省略号显示
飞扬_柳絮的专栏
09-18 1215
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>xdlines-demo</title> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <style ty
文字显示两行，超出两行部分显示省略号
well..
09-21 8623
overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
css 文本一行和多行省略
weixin_40542544的博客
05-07 4034
1.一般常规一行省略 display: inline-block; white-space: nowrap; width: 100%; overflow: hidden; text-overflow:ellipsis;
css 实现div内显示两行或三行，超出部分用省略号显示
热门推荐
树洞树洞-单纯记录
02-13 9万+
一、div内显示一行，超出部分用省略号显示 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;二、div内显示两行或三行，超出部分用省略号显示 overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
SassError: Expected newline. sass
King的博客
08-07 4086
SassError: Expected newline. sass报错
IOS兼容超出部分省略号
King的博客
04-27 2852
问题描述： 在IOS手机中，使用如下代码显示省略号不生效： overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 解决办法： overflow:hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; 另附超过部分在第二行省略号、第三行省略号代码： no-wrap-two()
CSS中常用的clearfix方法
King的博客
07-06 2370
常用的清除浮动(clearfix)方法： 清除兄弟元素带来的浮动影响 方法一：在浮动元素后新增一个空div标签，设置 clear:both; 方法二：在有影响的兄弟元素中设置 clear:both; 清除子元素给父元素带来的浮动影响 方法一：给父元素设置 overflow:hidden; 可加*zoom=1;用于兼容IE6 方法二：使用after伪元素清除浮动.outer::after{ ...
将很长一段的Text设置为单行显示并使其末尾显示省略号
最新发布
09-07
如果你想在Android的TextView中将一段很长的文本设置为单行显示并在其末尾显示省略号，你可以按照以下步骤操作： 1. 首先，确保你的TextView已经创建并且初始化了。例如，如果你是在XML布局文件中声明的TextView，可以用以下代码获取引用： ```xml <TextView android:id="@+id/text_view" android:layout_width="wrap_content" android:layout_height="wrap_content" /> ``` 然后在Java或Kotlin代码中获取它： ```java TextView textView = findViewById(R.id.text_view); ``` 2. 调用`setSingleLine(true)`方法来限制文本最多只能显示一行： ```java textView.setSingleLine(true); ``` 3. 接下来，使用`setEllipsize(TruncateAt.END)`方法来指定当文本超长时显示省略号，表示在句子的末尾： ```java textView.setEllipsize(TextUtils.TruncateAt.END); ``` 4. 可能还需要调整`maxLength`属性，以指定在单行显示时的具体长度，比如： ```java textView.setMaxLines(1); // 设置最大行数为1 textView.setLengthLimit(20) // 或者设置字符限制，例如20个字符 ``` 现在，如果TextView中的文本超过设定的长度，它将以单行显示，并在末尾显示一个省略号。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

King_960725

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值