Переполнение: скрытые точки в конце

206

Допустим, у меня есть строка " Мне нравятся большие задницы, и я не могу лгать », и я обрезал ее overflow:hidden, чтобы она выглядела примерно так:

Мне нравятся большие задницы, и я могу

отрезать текст. Можно ли отобразить это так:

Мне нравятся большие задницы, и я не могу ...

используя CSS?

html css

— mannicken
источник

46

Является ли этот вопрос уловкой для продвижения песни?

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

12

@CyrilGupta Извините за поздний ответ. Мне пришлось бежать в ванную. Чтобы ответить на ваш вопрос ... Да

— Джо Филлипс

1

Возможный дубликат Как я могу показать точки ("...") в промежутке со скрытым переполнением?

— Термининя

282

Вы можете использовать переполнение текста: многоточие; который согласно caniuse поддерживается всеми основными браузерами.

Вот демо на 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

— Джейс

Да, похоже, работает в более новых версиях. Очевидно, этому ответу уже несколько лет.

— Джо Филлипс

Firefox начал поддерживать это начиная с версии 7, которая была выпущена во второй половине 2011 года.

— Ричард Эв

1

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

— VoidKing

2

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

— VoidKing

89

Проверьте следующий фрагмент для вашей проблемы

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

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

— Лев

2

как заставить текст отображать 2 строки и потом исчезать?

— Martian2049

1

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

— Arjun

1

О, я вижу. Я попытался. однако кажется, что две строки означают, что не будет ... в конце?

— Martian2049

1

display: inline-block;был недостающим компонентом для меня. Спасибо.

— Сет

18

Попробуйте это, если вы хотите ограничить линии до 3, и после трех строк появятся точки. Если мы хотим увеличить линии, просто измените значение -webkit-line-зажим и задайте ширину для размера div.

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

— Нагендра Матала
источник

извинения, я не уверен, как я удалил ваши слова, как это!

— Алек

отлично работает на Chrome, но учтите, что это не сработает на Firefox

— Кен Биглер

Как мне сделать это в другом браузере, скажем, Firefox? Изменить: 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. Предостережение: пока еще не поддерживается повсеместно в браузерах.

— ceejayoz
источник

3

По состоянию на февраль 2012 года поддержка браузеров

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

— Maju
источник

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>

— Маной Патель
источник

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

— Рохит Парте
источник