前端杂记（一：CSS限制字数方法后加省略号）

最新推荐文章于 2024-03-07 12:44:51 发布

久别无恙

最新推荐文章于 2024-03-07 12:44:51 发布

阅读量708

点赞数 1

文章标签： CSS 文本溢出省略号样式前端开发

本文链接：https://blog.csdn.net/qq_44300774/article/details/110874562

版权

此处我们只做宽度固定的情况，文字超出后省略号只需要四个属性即可解决。废话不说直接上代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>css限制字数方法后加省略号</title>
    <style>
         .limit{
           width:400px;
           overflow:hidden; /*超出部分隐藏*/
           white-space:nowrap; /*让文本强制在一行不换行*/
           text-overflow:ellipsis;/*显示省略号来代表被修剪的文本*/
         }
            /*上面四个属性缺一不可*/
    </style>
</head>
<body>
    <div class="limit" title="">天生我才必有用天生我才必有用天生我才必有用天生我才必有用</div>
    <!-- css限制字数宽度必须有否则实现不了 -->
</body>
</html>