iview 实现文本自动省略号

已于 2022-03-16 13:10:46 修改
阅读量653 收藏
点赞数
分类专栏： 前端 文章标签： webview elementui android
于 2022-03-16 12:59:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ding43930053/article/details/123523721
版权
该博客探讨了两种实现文本自动省略号的方法：行内样式和外部样式。通过设置CSS属性`-webkit-line-clamp`和`overflow:hidden`，可以限制文本显示行数并隐藏多余内容。内容中展示了`Tooltip`组件结合这两种方式在展示长内容时的应用，确保内容的简洁性和可读性。
摘要由CSDN通过智能技术生成
  •  行内样式
<Tooltip max-width="200" content="====内容内容内容====">
	<span style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;">
		====内容内容内容====
	</span>
</Tooltip>
  • 外部样式
/*
*Ellipsis 文本自动省略号
*概述
*文本过长自动处理省略号，支持按照文本长度方式截取。
*/
.inco-ivu-ellipsis{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
<Tooltip max-width="200" content="====内容内容内容====">
	<span class="inco-ivu-ellipsis">
		====内容内容内容====
	</span>
</Tooltip>

D哈迪斯
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
常用Iview组件集合以及常用特性
SEU_YL的博客
07-20 1393
常用Iview组件集合以及常用特性 Button 可以选择不同类型代表会以不同颜色呈现 可以选择边框是否为虚线或者为文本模式的按钮 可设置为幽灵按钮 可设置loading状态 可禁用 size只可选small、default、large三种 Icon 可根据type来选择不同的图标样子 size可设置大小，单位px color可设置颜色 Typography文字排版 分别有<Title> <Txt> <Pragraph>三种组件，分别适用于标题、不同样式的文本、段落，这三
iview学习帮助文档
weixin_40885337的博客
03-25 3334
安装iview npm install view-design --save 导入iview 在main.js中导入iview import ViewUI from 'view-design'; import 'view-design/dist/styles/iview.css'; Vue.use(ViewUI); 按需引用iview组件 a.安装babel npm install babel-plugin-import --save-dev b.在 .babelrc 文件中 { "plugins
IVIEW对的table组件超出长度用省略号代替，使用气泡提示。
arly98196的博客
12-08 1003
render: (h, params) => { 　　return h('div', [ 　　　　h('Tooltip', { 　　　　props: { placement: 'top' } 　　　　}, [ 　　　　h('span', { 　　　　　　style: { 　　　　　　　　display: 'inline-block', 　　　　　　　　width: ...
iview中Table组件表格一行内容溢出部分使用...（省略号）来显示
li15565348506的博客
09-16 2454
iview中Table组件表格一行内容溢出部分使用...（省略号）来显示
文本过长自动形成省略号格式
baidu_36788549的博客
08-16 416
text-overflow: clip/ellipsis/string; 属性规定当文本溢出包含元素时发生的事情。 clip：修剪文本。 ellipsis：显示省略符号来代表被修剪的文本。 string：使用给定的字符串来代表被修剪的文本。 不过这个属性需要搭配其他的属性一起使用 1.使用的元素要是块级元素 2.设置width 3.强制文本不换行，white-space: nowra...
iview的table里面多余字用...省略掉
qq_43469899的博客
08-06 677
{ title: '客诉内容', width:350, align: 'center', key: 'content', render: (h, params) => { re...
css实现溢出文本自动转换为省略号
mhc20201554114的博客
11-20 611
在敲代码的过程中，有时那些使用了white-space:nowrap的div会产生文本溢出，文本溢出边框甚至侵占到其他div的区域，这无疑会让我们的页面变的十分难看，极大的降低用户体验，因此，为了避免文本溢出从而影响其他区域，我们经常会使用overflow:hidden来把溢出的文本隐藏，这无疑是一个很好的选择，但是有的时候，就会出现只出现半截字的情况，虽然没有前面的影响那么大，但是还是一个瑕疵，在这里，我们可以给对应的div的css中加上如下字段，从而实现溢出文本自动转换为省略号 .div{ .
python 数值型字符串实现四舍五入 decimal_Python将科学计数法数值转换为指定精度浮点数...
weixin_39630744的博客
12-15 1482
Python将科学计数法数值转换为指定精度浮点数 In [20]:money = 1190000.0 In [21]: traded_maket_value = 13824000000 In [22]: money / traded_maket_value Out[22]: 8.608217592592592e-05 In [23]: '{:.10f}'.format( money / trade...
View UI Plus 发布 1.2.0 版本，新增 Image、Skeleton、Typography组件
ViewDesign 的博客
06-13 1075
View UI Plus 1.2.0 版本已于 2022-06-13 发布。新增 Image、ImagePreview、Skeleton、Typography 组件。
java面试看这一篇就够了
H_Jason_的博客
09-20 932
java面试技术话术
iview table 表格实现 单列超出隐藏 鼠标悬浮出现详情
01-07
效果图 直接复制粘贴下面代码 就可以 { title: '交易订单号', align: 'center', key: 'id', minWidth: 120, render: (h, params) => { let texts=params.row.id; //这里的params.row.id 是 key值 if(params.row.id !=null){ if(params
怎么实现文字自动成省略号
qq_59790851的博客
08-04 160
.list-name{ display:-webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; //到第二行自动 显示 省略号 } 实现效果
iview表格文字超出后使用省略号
weixin_42142057的博客
05-17 5343
直接上代码吧 ，针对描述这一列，如果字数超出单元格，则显示省略号… {title: '描述', key: 'describe', render:(h, params) => { return h('div', [ h('span', { style: {display: 'inline-block', width: '...
html文本自动省略,css单行、多行文本溢出时自动显示省略号方法
weixin_31887307的博客
05-30 689
在实际项目开发中，经常会遇到这样的需求，需要我们把单行或者多行文字溢出时自动显示省略号，今天码云笔记就为大家通过多种方法来实现本末尾省略号显示这一需求。我们先从最原始的开始，单行文本溢出如何显示省略号。单行文本溢出显示省略号(…)省略号在ie中可以使用text-overflow:ellipsis，但有很多的浏览器都需要固定宽度，同时ff这些浏览器并不支持text-overflow:ellipsis...
iview render 名字过长显示省略号
Lucky铂爵
05-15 464
render: (h, params) => { if (!params.row.GoodsName) { return ""; } let text = params.row.GoodsName; if (text.length > 5) { text = text.substr(0, 5) + "..."; ...
华为nova5灭屏显示换风格_华为Mate30的灭屏显示功能，长期开着对屏幕会有影响吗？...
weixin_30008295的博客
01-16 1045
华为Mate30的灭屏显示功能，长期开着对屏幕会有影响吗？灭屏显示功能即使长期开着，对屏幕的影响可以忽略不计。为了防止烧屏等影响，灭屏显示将会定时变换位置进行显示的。灭屏显示的原理，主要是利用OLED屏幕是矩阵有机发光二极管，也就是每个像素点是独立可以自发光显示。所以在灭屏显示内容时就只是内容部分的像素点发光，而其它像素点呈现黑色时是停止工作的，就不会耗电。正是因为这样的特性，所以搭载了...
在HTML中文本过长自动出现省略号效果
cheye9760的博客
05-31 388
在网页开发中，我们总会碰到 “中文本过长自动出现省略号效果”的需求，如果不借助css，我们一般只能通过后台代码截取，或者使用JavaScript来截取进行实习该效果。 下面，我们就来聊聊这个需求如果快速的用css来实现吧！ 目标效果： 实现的CSS效果： 其中由红色线框圈...
iview table 文字过长 固定五行加省略号tooltip展示全部内容
weixin_45966494的博客
03-28 286
css:此处使文字固定五行并显示省略号。
当内容超出最大的长度的时候，使用CSS使文本显示省略号
涂作权的博客
01-06 3307
.description{  height:17px;  overflow:hidden;  text-overflow:ellipsis;  -webkit-text-overflow:ellipsis;  -o-text-overflow:ellipsis;  white-space:nowrap; }
iview select文本过长
最新发布
08-07
`，这样可以保证文本不会断开，而是显示省略号。 ```css .ivu-select-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ``` 2. **调整宽度**: 根据实际需要，给select元素设定一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

D哈迪斯

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

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

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

打赏作者

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

抵扣说明：

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

余额充值