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

jasmyn518

已于 2022-04-11 12:16:32 修改

阅读量126

点赞数

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

于 2022-04-11 12:13:39 首次发布

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

版权

笔记同时被 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">12</div>
      <div class="hot-item-content">
        <a
          href="https://www.zhihu.com/question/359128416"
          title="如何评价网传 B 站豪掷 8 亿拍下《英雄联盟》S10 - S12 三年全球总决赛独家直播版权？"
          target="_blank"
        >
          <h2 class="hot-item-title">
            如何评价网传 B 站豪掷 8 亿拍下《英雄联盟》S10 - S12
            三年全球总决赛独家直播版权？
          </h2>
          <p class="hot-item-excerpt">
            新京报讯（记者 白金蕾）12 月 3 日，新京报独家获悉，弹幕视频网站 B
            站以 8
            亿元价格拍得英雄联盟（LoL）全球总决赛中国地区三年独家直播版权。其他参与竞拍的企业还有快手、斗鱼、虎牙等国内一些直播平台。
            据了解，这是国内电竞赛事首次以拍卖的形式进行独家版权交易。但对于该独家版权的价格，不少圈内人士认为相对较高，5
            亿以内较为合理。而赛事用户打赏、转化情况不高，被猜测是几大直播平台并未出手的原因。
            英雄联盟全球总决赛是英雄联盟中一年一度最为盛大的比赛，也是所有比赛项目中最高荣誉、最高含金量、最高竞技水平、最高知名度的比赛。全球总决赛迄今为止已经举办了
            S1-S9 九届的比赛，全球总决赛一般在每年 10 月 -11
            月开赛。参赛者均是来自各大赛区最顶尖水平的战队，只有在每一年的职业联赛中表现出色的队伍才有资格参赛，每个赛区根据规模和水平决定其在总决赛当中的名额，全球共有
            13 个赛区。 新京报记者 白金蕾 编辑 王进雨 校对 李世辉
            战胜快手、虎牙，B 站 8 亿拍得 LoL 总决赛独家直播权
          </p>
        </a>
        <div class="hot-item-metrics">
          <span class="fire-icon"></span> 572 万热度
          <button class="button"><span class="plane-icon"></span>分享</button>
        </div>
      </div>

      <img
        class="hot-item-img"
        src="./images/image.png"
        alt="如何评价网传 B 站豪掷 8 亿拍下《英雄联盟》S10 - S12 三年全球总决赛独家直播版权？"
      />
    </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" />
复制链接

扫一扫