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; /*显示出省略号*/
}
实现效果图: