html - 将文本放在与第二行文本溢出省略号内联的点之后

Question

我需要隐藏超过 2 行的部分文本并添加 '...123 T.'作为 overflow hidden 的指标，如下所示:

到目前为止我所拥有的:https://plnkr.co/edit/NTlv4NpyhRTzJkNQ?preview
网址:

<div class="outside-container">
      <span class="container">
        <span class="main-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus mi,
          dapibus sit amet posuere eu, porttitor condimentum nulla. Donec
          convallis lorem justo, eget malesuada lorem tempor vitae. Aliquam
          sollicitudin lacus ipsum, at tincidunt ante condimentum vitae.
        </span>
        <span class="small-text">123 T.</span>
      </span>

      <span class="container">
        <span class="main-text">
          Lorem ipsum
        </span>
        <span class="small-text">123 T.</span>
      </span>

      <span class="container">
        <span class="main-text">
          Lorem ipsum dolor sit ameta,  adipiscing elit. Nam metus
        </span>
        <span class="small-text">123 T.</span>
      </span>
</div>

CSS:

.outside-container {
  width: 200px;
}

.container{
  max-width: 200px;
}

.main-text {
  overflow: hidden;
  vertical-align: middle;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.small-text {
  color: #8e8f8f ;
  font-size: 10px;
  vertical-align: middle;
}

Answer 1

将来，您将能够仅使用一行代码使用以下代码来完成此操作:

line-clamp: 2 "...123 T.";

您可以在 the specification 中找到更多详细信息:

The line-clamp property is a shorthand for the max-lines, block-ellipsis, and continue properties.

It allows limiting the contents of a block container to the specified number of lines; remaining content is fragmented away and neither rendered nor measured. Optionally, it also allows inserting content into the last line box to indicate the continuity of truncated/interrupted content.

在此之前，这是实现结果的一个非常hacky的想法:

.container {
  max-width: 200px;
  margin: 5px;
}

.main-text {
  line-height: 1.2em; /* the height of a line */
  max-height: calc(2 * 1.2em); /* restrict the height to 2 lines*/
  overflow: hidden;
  display: inline-block;
  position: relative;
}

.main-text:after {
  content: "123 T.";
  display:inline-block;
  width:40px;
  position:relative;
  z-index:999;
  /* a big box-shadow to hide the span element used for the ellipsis */
  box-shadow:
    40px 0 0 #fff,
    80px 0 0 #fff,
    120px 0 0 #fff,
    160px 0 0 #fff;
  /**/
  color: #8e8f8f;
  font-size: 10px;
  background: #fff; /* white background to cover the text behind */
  margin-left:2px;
}

/* this will replace the ellipsis */
.main-text span {
  position: absolute;
  /* position at the bottom right */
  top: 1.2em; /* height of one line */
  right: 0;
  padding: 0 3px;
  background: #fff; /* white background to cover the text behind */
}

.main-text span:before {
  content: "..."; /* the dots*/
}

/* the text after the dots */
.main-text span:after {
  content: "123 T.";
  color: #8e8f8f;
  font-size: 10px;

<div class="container">
  <div class="main-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus mi, dapibus sit amet posuere eu, porttitor condimentum nulla. Donec convallis lorem justo, eget malesuada lorem tempor vitae. Aliquam sollicitudin lacus ipsum, at tincidunt ante condimentum
    vitae. <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lorem ipsum <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lo <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lorem ipsum dolor sit ameta, adipiscing elit. Nam metus <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lorem ipsum dolor sit ameta, adipiscing elit <span></span>
  </div>
</div>

或者，如果您希望文本仅显示点，则如下所示:

.container {
  max-width: 200px;
  margin: 5px;
}

.main-text {
  line-height: 1.2em; /* the height of a line */
  max-height: calc(2 * 1.2em); /* restrict the height to 2 lines*/
  overflow: hidden;
  display: inline-block;
  position: relative;
}

.main-text:after {
  content: "."; /* at least one character to set the height */
  display:inline-block;
  width:40px;
  position:relative;
  z-index:999;
  /* a big box-shadow to hide the span element used for the ellipsis */
  box-shadow:
    40px 0 0 #fff,
    80px 0 0 #fff,
    120px 0 0 #fff,
    160px 0 0 #fff;
  /**/
  color: transparent; /* no colorataion*/
  font-size: 10px;
  background: #fff; /* white background to cover the text behind */
  margin-left:2px;
}

/* this will replace the ellipsis */
.main-text span {
  position: absolute;
  /* position at the bottom right */
  top: 1.2em; /* height of one line */
  right: 0;
  padding: 0 3px;
  background: #fff; /* white background to cover the text behind */
}

.main-text span:before {
  content: "..."; /* the dots*/
}

/* the text after the dots */
.main-text span:after {
  content: "123 T.";
  color: #8e8f8f;
  font-size: 10px;

<div class="container">
  <div class="main-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus mi, dapibus sit amet posuere eu, porttitor condimentum nulla. Donec convallis lorem justo, eget malesuada lorem tempor vitae. Aliquam sollicitudin lacus ipsum, at tincidunt ante condimentum
    vitae. <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lorem ipsum <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lo <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lorem ipsum dolor sit ameta, adipiscing elit. Nam metus <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lorem ipsum dolor sit ameta, adipiscing elit <span></span>
  </div>
</div>