css 文本内容显示样式

最新推荐文章于 2022-09-21 19:44:47 发布

if_you_can_please_do

最新推荐文章于 2022-09-21 19:44:47 发布

阅读量870

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/if_you_can_please_do/article/details/81585667

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

超出宽度不换行,超出部分显示…

white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis;

超出宽度自动换行

 white-space: normal;
 word-break: break-all;

样式效果图

这里写图片描述

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">

        * {
            box-sizing: border-box;
        }

       .wrapper {
           width: 500px;
           margin: 20px auto;

       }

       .wrapper fieldset, .wrapper p {
           margin-left: 90px;
       }

    </style>
</head>
<body>

    <div class="wrapper">

        <fieldset style="width: 320px">
            <h4> 默认样式 </h4>
        </fieldset>
        <p style="width: 160px; background-color: #9ed5ff;">
            这是一段文本文本文本文本文本文本文本文本abcdefghijklmnopqrstuvwxyz
        </p>

        <fieldset style="width: 320px">
            <h4> 超出宽度不换行,超出部分显示...  </h4>
        </fieldset>
        <p style="width: 160px; background-color: #9ed5ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
            这是一段文本文本文本文本文本文本文本文本abcdefghijklmnopqrstuvwxyz
        </p>

        <fieldset style="width: 320px">
            <h4> 超出宽度自动换行 </h4>
        </fieldset>
        <p style="width: 160px; background-color: #9ed5ff; white-space: normal; word-break: break-all;">
            这是一段文本文本文本文本文本文本文本文本abcdefghijklmnopqrstuvwxyz
        </p>

    </div>

</body>
</html>