Web实现：多行文本超出省略知乎热榜开发实例-CFANZ编程社区

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>单行文本溢出省略</title>
  </head>
  <body>
    <section class="hot-item">
      <div class="hot-item-index">9</div>
      <div class="hot-item-content">
        <a
          href="https://www.zhihu.com/question/359128416"
          title="男生是如何看待李佳琦的呢?"
          target="_blank"
        >
          <h2 class="hot-item-title">
            男生是如何看待李佳琦的呢?
          </h2>
          <p class="hot-item-excerpt">
            女朋友喜欢看李佳琦的直播买口红，我就只在热搜上看到他推荐的几个锅什么的踩了雷，对他无感。所以好奇广大男同胞怎么看待他
          </p>
        </a>
        <div class="hot-item-metrics">
          <span class="fire-icon"></span> 554 万热度
          <button class="button"><span class="plane-icon"></span>分享</button>
        </div>
      </div>

      <img
        class="hot-item-img"
        src="./images/image.jpg"
        alt="男生是如何看待李佳琦的呢?"
      />
    </section>
  </body>
</html>

CSS部分：

html,
body {
  height: 100%;
  margin: 0;
}

ul,
li {
  margin: 0;
  padding: 0;
}
li { 
  list-style: none;
}

h1,
h2 {
  margin: 0;
}

p {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

/* 浏览器都有自己的默认样式，以上部分为清除浏览器默认样式 */

.hot-item {
  width: 694px;
  box-sizing: border-box;
  padding: 16px 16px 16px 0;
  display: flex;
  background-color: #fff;
}

.hot-item-index {
  flex: none;
  width: 57px;
  text-align: center;
  line-height: 1.6;
  font-size: 18px;
  color: #999;
  font-weight: 600;
}

.hot-item-content {
  overflow: hidden;
}

.hot-item-title {
  color: #1a1a1a;
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
}

.hot-item-excerpt {
  font-size: 15px;
  color: #444;
  line-height: 25px;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hot-item-metrics {
  display: flex;
  align-items: center;
  color: #8590a6;
  font-size: 14px;
  margin-top: 8px;
}

.fire-icon {
  width: 18px;
  height: 18px;
  background: url(./images/fire.png) no-repeat center / contain;
}

.plane-icon {
  width: 18px;
  height: 18px;
  background: url(./images/plane.png) no-repeat center / contain;
}

.button {
  border: none;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0;
  margin-left: 28px;
  color: #8590a6;
  font-size: 14px;
}

.hot-item-img {
  width: 190px;
  border-radius: 4px;
  flex: none;
}