Как при слишком большом объёме текста в конце добавить точки?

Question

.textblock{
  border:1px solid black;
  width:300px;
  height:100px;
  margin 0 auto;
  font-size:1.5em;
  padding:1em;
  word-wrap:break-word;
  margin-bottom:3em;
}


a{text-decoration:none;}
a:hover{color:purple}

<!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">
  <title>Document</title>
</head>
<body>
  <div class="textblock"><a href="#" class="linktext">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a></div>
  <div class=" textblock"><a href="#" class="linktext">должно быть так должно быть так должно быть так должно быть так должно быть так должно быть так...</a></div>
</body>
</html>

Answer 1

    let textblock = document.getElementsByClassName('textblock');
    let dlinna = 50; // Количество символов после которых будут ставится точки.
    let Vals = [];
    for (let i=0;i<textblock.length;i++){
        if(textblock[i].innerText.length > dlinna){
            Vals[i] = textblock[i].innerText; // Сохраняем переменную, чтобы можно было с ней дополнительно работать в js
            textblock[i].innerText = textblock[i].innerText.substr(0 , dlinna) + '...';
        }
    }

    .textblock{
        border:1px solid black;
        width:300px;
        height:100px;
        margin 0 auto;
        font-size:1.5em;
        padding:1em;
        word-wrap:break-word;
        margin-bottom:3em;
    }


    a{text-decoration:none;}
    a:hover{color:purple}

<body>
<div class="textblock"><a href="#" class="linktext">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a></div>
<div class=" textblock"><a href="#" class="linktext">должно быть так должно быть так должно быть так должно быть так должно быть так должно быть так...</a></div>
</body>

Answer 2

.textblock {
  width: 200px;
}

.textblock p,
a {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

<div class="textblock">
  <a href="#" class="linktext">aaaaaaa aaaaa aaaaaaaaaaa aaaaaaaaa aaaaaaaaaaa aaaaaaaaa aaaaaa aaaaaaaaaaaaaaaa aaaaaa aaaaaaaaaaaaaaaaaaaaa  aaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaa aaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaa aaaaaaa</a>
  <p>Hey, don't cut me off like that. I want to speak my mind and don't appreciate being put into a box.</p>
</div>

Answer 3

А можно воспользоваться простым CSS свойством text-overflow:. Примеры:

.one,
.two,
.three {
  width: 70%;
  margin: 10px 0;
  background-color: lightgray;
}

.two {
  overflow: hidden; /* Обрезаем все, что не помещается в область */
  white-space: nowrap; /* Запрещаем перенос строк */
  text-overflow: clip; /* Обрезаем текст по размеру области */
}

.three {
  overflow: hidden; /* Обрезаем все, что не помещается в область */
  white-space: nowrap; /* Запрещаем перенос строк */
  text-overflow: ellipsis; /* Обрезаем текст и к концу строки добавляем многоточие */
}

<div class="one">Три девицы под окном пряли поздно вечерком. «Кабы я была царица, — говорит одна девица, — то на весь крещеный мир приготовила б я пир».</div>
<div class="two">Три девицы под окном пряли поздно вечерком. «Кабы я была царица, — говорит одна девица, — то на весь крещеный мир приготовила б я пир».</div>
<div class="three">Три девицы под окном пряли поздно вечерком. «Кабы я была царица, — говорит одна девица, — то на весь крещеный мир приготовила б я пир».</div>

БЛОГ НА HUSL

Как при слишком большом объёме текста в конце добавить точки?

Ответы (3 шт):