Web实现：多行文本超出省略知乎热榜开发实例

最新推荐文章于 2022-04-16 12:48:17 发布

jasmyn518

最新推荐文章于 2022-04-16 12:48:17 发布

阅读量202

点赞数

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

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

版权

笔记同时被 3 个专栏收录

127 篇文章 3 订阅

订阅专栏

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>单行文本溢出省略</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;
}

jasmyn518

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
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" />
复制链接

扫一扫