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

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; /*显示出省略号*/
        }

实现效果图：