HTML CSS 文字自动换行相关属性备忘

最新推荐文章于 2023-01-24 14:17:12 发布

Zonson9999

最新推荐文章于 2023-01-24 14:17:12 发布

阅读量278

点赞数

分类专栏： html-css

本文链接：https://blog.csdn.net/wuzhong8809/article/details/119841346

版权

html-css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这篇博客探讨了如何使用CSS来设置元素的宽度、背景颜色以及处理文本溢出的情况。通过示例展示了`overflow:hidden`、`word-wrap:break-word`以及`-webkit-line-clamp`属性的应用，用于限制div内的文字显示行数并避免内容超出容器。

摘要由CSDN通过智能技术生成

   <head>       
        <style>
            .b1{
                width: 100px;
                height: 50px;
                background-color: tomato;        
            }
        </style>
   </head> 

   <body>                                      
            <div class="b1"> ogofdsfdfsdfsdfsdf </div>     
   </body>


   <head>
        
        <style>
            .b1{
                width: 100px; 
                background-color: tomato;       
                 
                overflow : hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical; 
                word-wrap: break-word;
                -webkit-line-clamp: 1;      /*可以显示的行数，超出部分用...表示 */
            }
        </style>
   </head> 

   <body>                                      
            <div class="b1"> ogofdsfdfsdfsdfsdf </div>     
   </body>

      <style>
            .b1{
                width: 100px; 
                background-color: tomato;       

                word-wrap: break-word;
            }
        </style>