Переповнення: приховані точки в кінці

205

Скажімо, у мене є рядок " Мені подобаються великі недопалки, і я не можу брехати ", і я перерізав її overflow:hidden, тому вона відображає щось подібне:

Мені подобаються великі недопалки і я не можу

відрізання тексту. Чи можна відобразити так:

Мені подобаються великі недопалки, і я не можу ...

за допомогою CSS?

html css

— манікен
джерело

46

Це питання є помилкою для просування пісні?

— Кирило Гупта

12

@CyrilGupta Вибачте за пізню відповідь. Довелося бігти до ванної. Щоб відповісти на ваше запитання ... Так

— Джо Філіпс

1

Можливий дублікат Як я можу показувати крапки ("...") в проміжку із прихованим переповненням?

— Термініня

281

Можна використовувати переповнення тексту: еліпсис; який відповідно до канюзи підтримується всіма основними браузерами.

Ось демонстрація на jsbin.

.cut-text { 
  text-overflow: ellipsis;
  overflow: hidden; 
  width: 160px; 
  height: 1.2em; 
  white-space: nowrap;
}

<div class="cut-text">
I like big buts and I can not lie.
</div>

Розгорніть фрагмент

— Джо Філіпс
джерело

Це , здавалося , працювати в Firefox 15.0.1: w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow

— Jace

Так, схоже, він працює в нових версіях. Очевидно, що на цей момент відповіді є кілька років.

— Джо Філіпс

Firefox почав підтримувати це, починаючи з версії 7, яка вийшла в другій половині 2011 року.

— Річард Ев,

1

Я можу використовувати здоровий глузд, щоб сказати, що ця відповідь "правильна" на основі голосів та коментарів. Однак я не бачу насправді, наскільки ця відповідь "правильна". Я використовував як overflow: hidden;і text-overflow: ellipsis;в елементі (наприклад, блок - елемент) і не знайшов ...в кінці (я , звичайно , переконавшись в тому , що він дійсно переповнений). Я також спробував це без overflow: hidden;частини, а також з елементом всередині елемента, де елемент був overflow: hidden;і мав text-overflow: ellipsis;Як би я не намагався, це невдача ..

— VoidKing

2

Ну, я думаю, я знаю проблему. Я намагаюся обмежити переповнення на основі, max-heightтому я не можу white-space:встановити цеnowrap

— VoidKing

88

Перевірте наступний фрагмент своєї проблеми

div{
  width : 100px;
  overflow:hidden;
  display:inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div>
    The Alsos Mission was an Allied unit formed to investigate Axis scientific developments, especially nuclear, chemical and biological weapons, as part of the Manhattan Project during World War II. Colonel Boris Pash, a former Manhattan P
</div>

Розгорніть фрагмент

— Арджун
джерело

4

для додавання "white-space: nowrap;" які можуть знадобитися в деяких випадках

— лео

2

як змусити текст відображати 2 рядки, а потім зникнути?

— Martian2049

1

@ Matian2040 ви можете налаштувати, задавши фіксовану висоту та переповнення прихованих стилів, перевірте цю скрипку jsfiddle.net/5135L4bx

— Arjun

1

о Я бачу. я намагався. однак, здається, два рядки означає, що в кінці не буде ...

— Martian2049,

1

display: inline-block;була для мене відсутнім компонентом. Дякую.

— Сет

18

Спробуйте це, якщо ви хочете обмежити лінії до 3, а після трьох рядків точки з’являться. Якщо ми хочемо збільшити рядки, просто змінимо значення -webkit-line-clamp і надамо ширину для розміру div.

div {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
}

— Нагендра Матала
джерело

вибачте, я не впевнений, як я видалив ваші слова так!

— Алек

Відмінно працює в Chrome, але зауважте, що це не працюватиме на Firefox

— Ken Bigler

Як це зробити в іншому браузері, скажімо, Firefox? Edit: stackoverflow.com/questions/33058004 / ...

— user3187724

17

Сподіваємось, це корисно для вас:

.text-with-dots {
    display: block;
    max-width: 98%;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

<div class='text-with-dots'>Some texts here Some texts here Some texts here Some texts here Some texts here Some texts here </div>

Розгорніть фрагмент

— Ву-Фань
джерело

15

Так, через text-overflowвластивість у CSS 3. Caveat: вона ще не підтримується універсально в браузерах.

— ceejayoz
джерело

3

Підтримка веб-переглядачів зараз досить приємна, станом на лютий 2012 року. Дивіться caniuse.com/#search=text-overflow

— Simon East

1

Ага, ти з цієї причини з’явилася через три роки.

— Містер Лістер

8

У завантажувальній програмі 4 ви можете додати .text-truncateклас для врізання тексту еліпсисом.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 190px;">
  I like big butts and I cannot lie
</span>

Розгорніть фрагмент

— Пенні Лю
джерело

6

<style>
    .dots
    {
        display: inline-block;
        width: 325px;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
    }

    .dot
    {
        display: inline-block;
        width: 185px;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
    }
</style>

— Cuteboy_Max
джерело

3

Більшість рішень тут використовують статичну ширину. Але це може бути часом неправильним з якихось причин.

Приклад: у мене була таблиця з багатьма стовпцями. Більшість з них вузькі (статична ширина). Але головний стовпчик повинен бути максимально широким (залежить від розміру екрана).

HTML:

<table style="width: 100%">
  <tr>
    <td style="width: 60px;">narrow</td>
    <td>
      <span class="cutwrap" data-cutwrap="dynamic column can have really long text which can be wrapped on two rows, but we just need not wrapped texts using as much space as possible">
        dynamic column can have really long text which can be wrapped on two rows
        but we just need not wrapped texts using as much space as possible
      </span>
    </td>
  </tr>
</table>

CSS:

.cutwrap {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 18px;
  white-space: normal;
  color: transparent !important;
}
.cutwrap::selection {
  color: transparent !important;
}
.cutwrap:before {
  content: attr(data-cutwrap);
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
}
/* different styles for links */
a.cutwrap:before {
  text-decoration: underline;
  color: #05c;
}

— Маджу
джерело

3

<!DOCTYPE html>
<html>
<head>
<style>
.cardDetaileclips{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* after 3 line show ... */
    -webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div style="width:100px;">
  <div class="cardDetaileclips">
    My Name is Manoj and pleasure to help you.
  </div>
</div> 
</body>
</html>

— manoj patel
джерело

-1

приховати текст під час завантаження та показати курсор

<span class="hide-text"> How to hide text by dots and show text on hover</span>

.hide-text {
    width: 70px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
  }

  span:hover {
     white-space: unset;
     text-overflow: unset;
  }

— Рохіт Парте
джерело