Поместите текст после точек во второй строке многоточия при переполнении текста

Мне нужно скрыть часть текста длиной более 2 строк и добавить '...123 T.' в качестве индикатора скрытого переполнения, как показано ниже:

введите описание изображения здесь

Что у меня есть: 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;
}

html css ellipsis
person Ketija Krista    schedule 11.07.2020    source источник
comment
Вы можете попробовать text-overflow: "... 123 T";, но он поддерживается не всеми браузерами.   -  person BEAGLE    schedule 11.07.2020
comment
У меня не сработало в Chrome, но спасибо   -  person Ketija Krista    schedule 13.07.2020

Ответы (2)


arrow_upward
2
arrow_downward

В будущем вы сможете сделать это с помощью только одной строчки кода, используя:

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

Более подробную информацию можно найти в спецификации:

Свойство line-clamp является сокращением для свойств max-lines, block-ellipsis и continue.

Позволяет ограничить содержимое блочного контейнера указанным количеством строк; оставшееся содержимое фрагментируется, не отображается и не измеряется. При желании он также позволяет вставлять содержимое в поле последней строки, чтобы указать непрерывность усеченного / прерванного содержимого.

введите описание изображения здесь

А пока вот очень хитрая идея для достижения результата:

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

person Temani Afif    schedule 11.07.2020

arrow_upward
2
arrow_downward

Дает ли следующий код желаемый результат?

.outside-container {
  width: 220px;
}

.container {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-end;
}

.main-text {
  overflow: hidden;  
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-right: 5px;
}

.small-text {
  color: #8e8f8f;
  font-size: 10px;
  white-space: nowrap;
  transform: translateY(-2px);
}
<div class="outside-container">
  <div 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>
  </div>
  <div class="container">
    <span class="main-text">
          Lorem ipsum
        </span>
    <span class="small-text">123 T.</span>
  </div>
  <div class="container">
    <span class="main-text">
          Lorem ipsum dolor sit ameta,  adipiscing elit. Nam metus  Donec
          convallis lorem justo, eget malesuada lorem tempor vitae. Aliqua
        </span>
    <span class="small-text">123 T.</span>
  </div>
</div>

person Anurag Srivastava    schedule 11.07.2020
comment
не охватывает все случаи: jsfiddle.net/ajL9ckpd - person Temani Afif; 12.07.2020
comment
Спасибо, но да, это работает не для всех моих данных - person Ketija Krista; 13.07.2020