设置n行文字之后超出隐藏

最新推荐文章于 2024-02-18 17:06:12 发布

Cdlblbq

最新推荐文章于 2024-02-18 17:06:12 发布

阅读量98

点赞数

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/weixin_45818024/article/details/111773821

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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

或者使用以下代码

display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

-webkit-line-clamp: n; 将 n 改为你想要的行数

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Cdlblbq

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

对于文字设置超出部分隐藏

前端之行，任重道远！

08-05

4556

1. 设置单行文字超出部分隐藏 P{ overflow: hidden; /* 超出一行文字自动隐藏 */ text-overflow: ellipsis; /*文字隐藏后添加省略号*/ white-space: nowrap; /*强制不换行*/ } 2. 设置多行文字超出部分隐藏 P { display: -webkit-box; overflow: hidden

html5数据超出显示省略号,h5文字超出，两行显示，超出显示省略号

weixin_39987926的博客

06-07

2162

最近接到一个需求，要求商场导航里的文字最多显示两行，超出两行的省略号显示，查一些资料，又根据自己的需求，改了很多，直接上代码吧.main{width: 360px;border: 1px solid #ccc;overflow: hidden;}.child{float: left;height: 40px;overflow: hidden;padding: 10px;background-col...

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

纯CSS实现文字超过n行后省略功能

weixin_34163553的博客

10-10

177

在切图阶段，经常会遇到，设计稿要求超出n行后剩余文字省略，并用...代替的需求。类似于下图单行文字单行文字时实现比较容易，使用overflow: hidden和text-overflow: ellipsis即可，其中ellipsis即省略号的意思，使用width: 10em限制横向字符数量。多行文字多行文字主要使用的CSS属性如...

echarts坐标轴上的刻度竖着排列并且超出隐藏

notagoodwriter的博客

11-10

1339

echarts坐标轴上的刻度竖着排列并且超出隐藏

利用css实现文本超出N行之后显示省略号等css常用小知识点

小白变怪兽

03-01

4676

css代码如下： text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; //这儿的数字代表的就是你所需要实现效果的第N行 -webkit-box-orient: vertical; 效果如下图所示...

设置div中文字超出时自动换行和css实现文本超出N行之后显示省略号等

热门推荐

昔人'

06-06

1万+

一、对于div强制换行 1.（IE浏览器）white-space:normal; word-break:break-all;这里前者是遵循标准。 #wrap{white-space:normal; width:200px; } 或者 #wrap{word-break:break-all;width:200px;} 2.（Firefox浏览器）white-space:normal; word-br

java 文本隐藏溢出部分_css overflow溢出隐藏(文字溢出时的自动隐藏处理)

weixin_33806859的博客

03-02

439

overflow 属性说明:版本：CSS2　兼容性：IE4+ NS6+　继承性：无语法：overflow : visible | auto | hidden | scroll相关参数说明如下：visible:：不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效。auto：此为body对象和textrea的默认值。在需...

文本超出两行用省略号表示，点击展开方法查看所有以及点击收起方法隐藏

是大林的林吖-博客

08-31

1259

【代码】文本超出两行用省略号表示，点击展开方法查看所有以及点击收起方法隐藏。

css怎样清除隐藏溢出,Css溢出隐藏

weixin_30047059的博客

08-03

2351

display: -webkit-box;-webkit-line-clamp: 2; /*多少行数之后显示为省略...*/word-wrap: break-word;word-break: break-all;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;display:block;width...

echart横轴文字显示省略号_Echarts X轴内容过长自动隐藏,鼠标移动上去显示全部名称方法...

weixin_31515619的博客

12-29

3376

最近公司做项目,使用echarts做开发,碰到一些数据的名称很长导致图例展示的效果不是很好,自己写了一个方法,当X轴内容过长时自动隐藏,鼠标移动上去显示全部名称样例:图二是鼠标移动到名称显示的,怎么带着鼠标一起截图博主不是很清楚,不要在意这些细节好了.这里来说一下博主的实现方式1. 设定mychart.on('mouseover',functionx) ,mychart的鼠标悬浮事件,当鼠标移动到...

前端实战——完美解决文本框超出内容用“……”表示，鼠标滑过时显示隐藏内容

softwareCraftsman

02-12

1万+

在前台的开发过程中我们通常会遇到这样的问题。内容太多，显示不全，若要全部显示出来的话，又觉得太挤得慌。怎么办？如下图所示（让用户看了就会感觉很不爽！）那么这个时候需求就有了： 1、要求在你内容在超出文本框的时候，需要用省略替代。 2、还能够使得页面的元素自动适应页面的大小进行变化调整。（再来一个高级一点的需求。） 3、在你的鼠标滑过的时候，将内容放到一个tooltip中显示出来

-webkit-line-clamp 控制文字显示多行，多出部分显示省略号

王建忠的博客

09-15

2389

-webkit-line-clamp是一个私有的、不在规范内的css属性，当这样使用的时候：display: -webkit-box; // 需配合的盒子属性 -webkit-line-clamp: 2; // 多少行后再多出时显示... -webkit-box-orient: vertical; // 默认水平，这里设置垂直可以达到这样的效果：当然，加上固定height和overflow:hi

echarts横坐标自动判断文字遮挡问题-简单记录-仅供参考

郑伟斌的博客

08-27

4454

1.简介熟悉echarts的同学应该知道，echarts中的直角系图表当坐标轴为类目型（常为x轴）而且数据又特别多时，默认会隐藏掉一部分x轴文字。效果就类似于这样：然而，echarts自带的计算有时候是过于苛刻的，即使文字实际上不存在遮挡问题，当文字与文字间的间隔小于一定值时同样会触发隐藏机制，例如上面那张图，如果设置{xAxis:{axisLabel:{interval:0}}}显示出所有...

Stable Diffusion系列（六）：原理剖析——从文字到图片的神奇魔法（潜空间篇）

最新发布

羊城迷鹿的博客

02-18

2614

论文提出了一个名为Latent Diffusion Models (LDM)的新模型，旨在减少直接在像素空间中训练扩散模型所带来的计算复杂度。提出了两阶段训练方法：首先训练一个自动编码器，学习一个低维的潜在空间表示，然后在自动编码器的潜在空间中训练扩散模型。这显著降低了训练和推理的计算复杂度。引入交叉注意力机制：通过将交叉注意力层添加到UNet中，LDM可以处理各种条件输入，如文本或语义布局，并实现高质量的图像生成。

使用element-ui中的table修改鼠标经过或悬停行时颜色修改

走走停停

02-25

1万+

第一种： .el-table--enable-row-hover .el-table__body tr:hover>td{ background-color: #c6cfdf !important; } 第二种： .el-table__body tr:hover>td{ background-color: #c6cfdf!important; } .el-table__body tr.current-row>td{ background-color: #c6

vue实现多条数据显示并滚动的效果

走走停停

09-15

2501

<divid="box"> <divid="con1"ref="con1":class="{anim:animate==true}"@mouseenter="mEnter"@mouseleave="mLeave"> <pv-for='(item,index)initems':key="index">{{item.name}}</p> </div> </div> data(){ return...

vue组件样式穿透 /deep/ ::v-deep ＞＞＞

走走停停

11-13

1793

在写一些vue项目时候，经常会引入一些组件。无论是自定义组件还是引入的外部组件。style标签上都有scoped属性。防止影响到其他页面上的样式。但是又是需要在父组件更改自组件的样式。就要用到组件穿透（也叫深度修改css）。可用的方法有 /deep/ ::v-deep >>> <style scoped> /*编译前*/ // >>> // 如果项目使用的是原生样式css, 那么你可以直接使用 >>> 穿...

element中table表格加入拖拽功能

走走停停

09-11

1692

假如表格有父元素，不要给父元素高度，高度让表格自动撑开，这样才能实现拖拽效果。一、首先在表格中加入一下属性，二、在表格的底部table的同级加上一下代码。 <divclass="lineDiv"ref="lineDivOne">点我向上或向下拖动表格</div> 三、在data里面定义表格的初始默认高度四、将一下代码放到mounted（）生命周期函数中 constthat=this vartableCardOne=t...

优惠卷样式代码编写

走走停停

06-17

1463

效果图：

html设置文字超出隐藏

05-25

1. 首先需要设置元素的宽度和高度，超出这个范围的文字将被隐藏。 2. 然后设置`overflow: hidden`属性，将超出范围的内容进行隐藏。 3. 最后设置`text-overflow: ellipsis`属性，当文字超出时，会显示省略号。 ...