多行文字、单行文字限制行数超出用...表示

张媛的博客

已于 2022-05-18 16:47:18 修改

阅读量255

点赞数 1

分类专栏：前端文章标签： safari linq css

于 2022-05-18 16:46:13 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42132841/article/details/124845856

版权

前端专栏收录该内容

22 篇文章

订阅专栏

本文介绍了两种CSS文本溢出隐藏的方法，适用于单行和多行文本。第一种方法利用`-webkit-line-clamp`属性限制显示的行数，结合`display: -webkit-box`实现多行文本隐藏。第二种方法通过`overflow`和`text-overflow`属性实现单行文本的省略显示。这些技巧在网页布局中常用于优化长文本的显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种方式：多行、单行都可

width:100upx;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;  //可展示几行
-webkit-box-orient: vertical;

第二种方式：单行

width:100upx;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

张媛的博客

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

uni-app - 单行文字和多行文字溢出隐藏显示...（超出容器最大宽度不换行）

王二红

12-24

8462

前言如下图所示，可控制单行或多行溢出处理。实现给容器加入以下css代码： .text{ display:-webkit-box;/*弹性伸缩盒子模型显示*/ -webkit-box-orient:vertical;/*排列方式*/ -webkit-line-clamp:1;/*显示文本行数(这里控制多少行隐藏)*/ overflow:hidden;/*溢出隐藏*/ } ...

文本多行限制、强制单行(不换行)、超出省略、换行、间距

liubiaoyuzhou的博客

11-12

915

1.多行文本限制 display: -webkit-box; /* 必须结合的属性，将对象作为弹性伸缩盒子模型显示 */ -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */ -webkit-line-clamp: 1; /* 设置元素内容最多为几行 */ overflow: hidden; /* 可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 */ 2.单行显示 white-space: n.

参与评论您还未登录，请先登录后发表或查看评论

限制文本行数，超出...

吕小威的博客

02-02

298

如图：超出限制行数显示… 单行文本 .text { width: 100%; display: inline-block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 多行文本 .text { width: 190px; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-

限制文本行数，溢出内容用...代替

Gomeer的博客

12-05

440

限制文本行数，溢出内容用…代替 overflow: hidden //使溢出的内容隐藏 text-overflow: ellipsis; //隐藏的内容由省略号代替 css代码如下，可以直接引用 { overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:2; //行数 ...

文本限制显示行数，多出的显示省略号...

sssffdgh的博客

03-20

296

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

限制文本行数，超出部分省略号

weixin_45805459的博客

10-18

176

white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;

CSS 限制文字行数(超出显示省略号...)

12-20

以下是两种CSS限制文字行数的方法： 1. 单行隐藏： ```css .xxx { /* 文本不换行 */ white-space: nowrap; /* 超出范围隐藏 */ overflow: hidden; /* 文字超出用省略号 */ text-overflow: ellipsis; } ``` 2...

微信小程序实现多行文字超出部分省略号显示功能

10-16

在微信小程序的开发过程中，有时候我们需要对长文本进行合理的展示，特别是在列表中，为了保持界面的整洁和美观，我们可能需要限制文字的显示行数，超出部分则用省略号表示。本文将详细介绍如何在微信小程序中实现这...

文字末尾加图片按钮，点击按钮打开折叠文字，设置文字显示指定行数TextApp

08-10

1. **多行文字折叠显示**：首先，TextView的`maxLines`属性被用来限制最多显示的行数。当文本长度超过这个限制时，超出部分会被隐藏，只显示前`maxLines`行。 2. **末尾显示+图按钮**：在TextView内容的末尾，添加...

CSS实现文字多行省略效果.zip_朋友圈文字最后变成省略号

01-08

在给定的“CSS实现多行文字显示省略号效果.zip”压缩包中，包含了一个名为“2.css”的样式表文件，它使用了`-webkit-line-clamp`属性来指定省略的行数，以及一个“1.html.txt”的HTML文件，用于展示这个效果。...

elementui table 文本限制行数隐藏

qq_25219151的博客

07-21

2050

elementui table 中 show-overflow-tooltip=“true” 只能有一行隐藏有时候无法满足需求时 html <el-table-column label=""> <template slot-scope="scope"> <el-tooltip popper-class="tip-cell" placement="top" v-model="sco

Element Plus的el-table表格中单元格内容过多显示省略号，并修改弹框样式

最新发布

weixin_60196946的博客

01-29

2507

表格中内容超出单元格的宽度会自动换行，会使整个表格看起来显得不太美观，此时可以使用el-table-column 自带的属性来设置。

【Vue】使用elementPlus的table时,实现自定义tooltip效果，单行显示，超出则显示省略号，鼠标移入后，当文字数量大于20则换行自定义展示的tooltip

余浩的博客

08-15

6089

使用elementPlus的table时，实现自定义show-overflow-tooltip效果，文字在table中单行显示，超出宽度则显示省略号，鼠标移入后，当文字为30个字以内的时候单行显示tooltip，超出30个字则显示可以换行自定义展示的tooltip。

表格内的容显示三行，超过三行省略

2301_77345300的博客

08-09

821

添加一下对应的css属性。

element-plus表格隐藏行数功能

DejaVus的博客

08-01

723

element-plus表格隐藏行数功能

asp textbox 多行限制只能输入两行_多行文本省略的JS解决方案

weixin_39637711的博客

11-20

339

前言在项目开发过程中，经常会遇到溢出文本的省略问题。根据需求，可以把文本省略分为单行文本省略和多行文本省略两类。单行文本的省略，现在css样式 text-overflow 已经有兼容性很好的样式支持了。但是多行文本，目前只有支持webkit内核的css样式 -webkit-line-clamp 可以做到，只是它针对火狐浏览器就行不通了。这就是本文要解决的问题。css解决方案（可跳过）如果上网搜索【...

多行文本框的字符数限制

越努力就越主动。

05-30

2533

在Web开发中经常会遇到多行文本框，比如：备注栏。普通的文本框控件如果想要限制字符长度可以直接设置maxLength属性，但是，一旦将文本框设置为多行，虽说也可以设置maxLength属性，但是我们会发现这个功能已经失效了，于是我找了个新的方法，比较复杂了点，希望大家有好的意见可以给我提。 1.首先在中添加下列js脚本: function setMaxLength(object,l

进阶——CSS中多行文本时的行数控制显示

番薯大佬的专栏

04-18

5031

WeChat小程序交流（QQ群：769977169）有时候要进行多行文本内容只显示一行，或两行，或三行，这时候需要在css中进行相关属性的设置，代码如下：overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; // 显示2行 -webkit-box-orient: vertical; word-break: break-all;......

多行文字、单行文字限制行数 超出用...表示

多行文字、单行文字限制行数超出用...表示