Web实现：多行文本超出省略知乎实例

最新推荐文章于 2022-08-24 10:33:08 发布

jasmyn518

最新推荐文章于 2022-08-24 10:33:08 发布

阅读量233

点赞数 1

分类专栏： HTML CSS 笔记文章标签： css 前端

本文链接：https://blog.csdn.net/jasmyn518/article/details/124211816

版权

笔记同时被 3 个专栏收录

127 篇文章 4 订阅

订阅专栏

HTML

78 篇文章 2 订阅

订阅专栏

CSS

68 篇文章 0 订阅

订阅专栏

HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./index.css">
  <title>Document</title>
</head>
<body>
  <div class="card">
    <div class="title">当我回家的时候，我的猫跑到我面前，不停喵喵叫，这是什么意思？</div>
    <div class="author">
      <div class="avatar"></div>
      <div class="username">崽崽</div>
      <div class="tag">铲屎官、摄影爱好者、外星人研究中心高级清洁工、双向喵星卧底</div>
    </div>
    <div class="txt">我的天！恭喜你俘虏喵心一颗，它想你这个两脚兽啦！在昨天之前，我以为我的猫崽子是不屑于亲近我的，但是昨天我回家的时候却发现它哈哈哈一直在叫，但我一进门它就不叫了，跑过来蹭我的腿。哈哈。</div>
  </div>
</body>
</html>

CSS部分：

.card {
  width: 320px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #979797;
  background: #f4f4f4;
}
.card .title {
  font-weight: 600;
  font-size: 16px;
  color: #333333;
  margin-bottom: 5px;
}
.card .author {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.card .author .avatar {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #d8d8d8;
  margin-right: 5px;
  flex: none;
}
.card .author .username {
  font-weight: 500;
  font-size: 12px;
  color: #666;
  margin-right: 5px;
  flex: none;
}
.card .author .tag {
  font-size: 12px;
  color: #999;
  flex: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.card .txt {
  font-size: 14px;
  color: #333333;
  /* 隐藏超出部分 */
  overflow: hidden;
  /* 文本超出就用省略号 */
  text-overflow: ellipsis;
  /* 把对象作为弹性伸缩盒子模型显示 */
  display: -webkit-box;
  /* WebKit内核的浏览器的私有属性，设置文本超出2行就用省略号 */
  -webkit-line-clamp: 2;
  /* WebKit内核的浏览器的私有属性，设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-box-orient: vertical;
}

jasmyn518

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
Web实现：多行文本超出省略知乎实例

HTML部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="st
复制链接

扫一扫