文本多行省略，单行省略

一两岁你呢

已于 2023-08-11 17:56:00 修改

阅读量46

点赞数

文章标签： html css

于 2023-08-10 10:40:56 首次发布

本文链接：https://blog.csdn.net/weixin_43095165/article/details/132204139

版权

文本单行省略

<div class="text">文本12345678111111111111111</div>

.text{
    width:48px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

在这里插入图片描述 ## 文本多行省略

.text{
    width: 115px;
    height: 46px;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

在这里插入图片描述

多行文本省略，且内容居中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="text">
    <span>文本12345678111111111111111</span>
  </div>
  <div class="text">
    <span>文本1</span>
  </div>
</body>
<style>
  .text{
    width: 115px;
    height: 46px;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    display: flex;
    align-items: center;
  }
  span{
    margin: auto 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
</html>