文本溢出

1，单行文本溢出

图片.png

代码

2，多行文本溢出

搜索： css multiline ellipsis
搜到的网上例子

图片.png

只在google上面起作用，火狐不起作用
代码
IE不支持

3，如果要让IE也有这种省略效果怎么办？

设计的思想：
方法一：添加一个<span>...</span>，定位到文字的最后

图片.png

代码

方法二：添加一个<span class="mask">&nbsp</span> 为这个span添加样式 设置它的渐变效果，设置定位到文字的后半部分视觉上告诉用户后面还有文字内容
制作渐变效果在线工具

图片.png

代码

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • 文本溢出显示省略号
    文字超出父级高度，需要使超出的文字用省略号代替。例如现在有如下元素： 要实现超出的文字用省略号代替： 可以通过一下...
    我是xy阅读 4,587评论 0赞 1
  • CSS核心属性5---文本溢出
    1、溢出属性（容器的） overflow:visible/hidden(隐藏)/scroll/auto(自动)/i...
    阿甘笔记阅读 2,701评论 0赞 1
  • 文本溢出
    单行：overflow: hidden;white-space: nowrap;text-overflow: el...
    咸鱼plus阅读 3,607评论 0赞 0
  • CSS3文本溢出显示省略号
    语法： 默认值：clip 适用于：所有元素 clip： 当对象内文本溢出时不显示省略标记（...），而是将溢出的部...
    isaaCyu阅读 2,767评论 0赞 0
  • 文本溢出显示省略号(单行和多行)
    平时用的较多的事单行文本溢出显示省略号，做微信端发现移动端不少效果都是多行文本溢出显示省略号，故而总结一下，方便今...
    灵籁阅读 4,751评论 9赞 0

友情链接更多精彩内容