css实现两行文字尾端为日期、文字部分超出省略

88 阅读1分钟

css实现如下图所示功能,两排文字包括标题跟日期、日期在尾端且标题超出部分省略号隐藏


1704436250899.png

  <div class="box">
    <span class="date">2023-10-11</span>
    <span>仙路尽头谁争锋、一见无始道成空。手握日月摘星辰,世间无我这般人。仙之巅,傲世间,有我安澜变有天。</span`>`
  </div>
.box {
  width: 100%;
  margin: 0 auto;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* .text::before 的 height 是距离顶部的距离 于此line-height有关系 */
  line-height: 20px;
}

.box .date {
  float: right;
  clear: left;
  color: blue;
  cursor: pointer;
  margin-left: 10px;
}

.box::before {
  content: '';
  float: left;
  width: 1px;
  height: 20px;
}