admin 管理员组

文章数量: 1087582

解决单行文本省略号显示问题

1.单行文本显示省略号的条件:

1.容器有固定的宽度：即width为定值
2.强制容器中文本不能换行：white-space:nowrap;
3.设置溢出文字隐藏：overflow:hidden;
4.显示省略号：text-align:ellipsis;

2.案例：

<div class="content" align="center"><!-- 图片模块 --><img src="./案例.png" alt="原野映像"><!-- 内容模块 --><h2>2016原野映像【跨年晚会】xxxxxxxxxxx</h2><!-- 文字模块 --><div class="bottom"><h2>Time:2016.Jan.30</h2><p>原野映密2016跨年晚会，邀请众多海南三</p><p>亚婚纱摄影业内嘉宾共同参与原野—年一度</p><p>大聚会,为了共同的梦想走到了一起”和你</p><p>一起感受时光"成为了这一届的主题。</p></div></div>

.content>h2{width: 361px;padding:0 30px;color:#fff; background-color: rgba(9, 206, 220, 0.797); font-weight: 500;/* 设置单行文本省略 */white-space: nowrap;/*强制在一行显示*/overflow: hidden;/*溢出部分隐藏不可见*/text-overflow:ellipsis; /*显示出省略号*/}

实现效果图：

本文标签： 解决单行文本省略号显示问题

版权声明：本文标题：解决单行文本省略号显示问题 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1686651374a20504.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。