如何控制文本溢出隐藏及单行显示

如何使文字溢出不换行

HTML内容

<p class="text">
	适合场景：文字内容较多，确定文字内容一定会超过容器的，那么选择这种方式不错。但文字未超出行的情况下也会出现省略号,可结合js优化该方法。
</p>

添加CSS样式

.text{
    width: 500px;
    border: 1px solid green;
    /* 溢出隐藏 */
    overflow: hidden;
    /* 文本溢出显示省略号 */
    text-overflow: ellipsis;
    /* 规定文本不进行换行 */
    white-space: nowrap;
}

页面效果如下：

overflow 属性值

属性值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

text-overflow属性值

属性值	描述
clip	修剪文本
ellipsis	显示省略符号来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。

文本格式化

	<!-- 文本加粗 -->
    <b>这是文本加粗的1</b>
    <strong>这是文本加粗的2</strong>
    
    <!-- 文本放大 -->
    <big>这个是文本放大的</big>

    <!-- 文本缩小 -->
    <small>这个是文本缩小的</small>

    <!-- 文本斜体 -->
    <em>这个是文本斜体的1</em>
    <i>这个是文本斜体的2</i>

    <!-- 文本下标 -->
    <span>这个文本包含<sub>下标</sub></span>

    <!-- 文本上标 -->
    <span>这个文本包含<sup>上标</sup></span>

    <!-- 文本下划线 -->
    <del>这个是文本下划线</del>

    <!-- 删除文本效果 -->
    <ins>这个是删除文本效果</ins>
    
    <!-- 预格式文本 -->
    <pre>
        如何使用 pre 标签
        对空行和    空格
        进行控制
    </pre>

    <!-- 反方向显示 -->
    <p><bdo dir="rtl">该段落文字从右到左显示</bdo></p>  

总结：大概内容就这些，如下补充，欢迎读者下面评论

---