CSS文本超出显示省略号

最新推荐文章于 2024-08-14 11:23:00 发布

小怪兽学前端

最新推荐文章于 2024-08-14 11:23:00 发布

阅读量206

点赞数

分类专栏： css小例子文章标签： css html

本文链接：https://blog.csdn.net/weixin_41970780/article/details/109787542

版权

css小例子专栏收录该内容

13 篇文章 0 订阅

订阅专栏

CSS文本超出显示省略号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
.mydiv{
        width: 300px;/*定义块元素的宽度*/
  
        white-space: nowrap;/*内容超宽后禁止换行显示*/
  
        overflow: hidden;/*超出部分隐藏*/
  
        text-overflow:ellipsis;/*文字超出部分以省略号显示*/
  }
    </style>
</head>
<body>
  <div class="mydiv">我想，在这个世界上，虽然没有最美好的相遇，但却应该有为了相遇或者重逢，所做的最美好的努力。</div>
</body>
</html>