将文本放置在与第二行文本溢出省略号内联的点后 [英] Place text after dots inline with the second line of text overflow ellipsis

问题描述

我需要隐藏超过两行的文本部分，并添加'...123 T.'作为隐藏溢出的指示符，如下所示:

I need to hide a part of the text that is longer than 2 lines and add '...123 T.' as an indicator of the hidden overflow, like below:

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

What I have so far: https://plnkr.co/edit/NTlv4NpyhRTzJkNQ?preview

HTML:

<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;
}

推荐答案

将来，您将只能使用以下一行代码来执行此操作:

In the future you will be able to do this with only one line of code using:

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

您可以在规范中找到更多详细信息:

You can find more detail in the specification:

line-clamp属性是max-lines，block-ellipsis和continue属性的简写.

它允许将块容器的内容限制为指定的行数；剩余的内容被分割掉，既不呈现也不度量. (可选)它还允许将内容插入到最后一行以指示被截断/中断的内容的连续性.

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 想法:

Until then, here is a very hacky idea to achieve the result:

.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>

这篇关于将文本放置在与第二行文本溢出省略号内联的点后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！