如下一个样式,如何实现。昵称过长显示省略号,如图二。
需要考虑的点
- 昵称长,显示省略号
- 昵称短,图标紧随昵称
- 后面图标时不时的要增加减少,修改起来方便。
我想到的实现方案
- css方案(就是目前我用的flex),缺点是图标和昵称有时候会出现一个不可抗拒的间距。缺点二来就是flex的兼容问题了。
- js计算方案(想法),程序用
vue
实现的,图标为一个组件,渲染完成通知上面自己的宽度,动态修改文字宽度。
想问问还有什么好的实现方案,尝试过float
+BFC
但是效果不好。
如下一个样式,如何实现。昵称过长显示省略号,如图二。
需要考虑的点
我想到的实现方案
vue
实现的,图标为一个组件,渲染完成通知上面自己的宽度,动态修改文字宽度。想问问还有什么好的实现方案,尝试过float
+BFC
但是效果不好。
css https://developer.mozilla.org...
使用详情:http://www.daqianduan.com/617...
单行文本溢出:
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
多行文本溢出:
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
5 回答1.9k 阅读
楼主您好,
flex
方式还是比较好的,您说的空格可以用负的margin
解决一下,暂时还没弄明白是怎么产生的我这里用
BFC
的方式实现了一下主要代码如下
这里的图标用了一个小正方形表示的
https://codepen.io/xboxyan/pe...
如果有用可以点赞并采纳,谢谢 ^^