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

Question

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

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

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

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

с использованием CSS?

Answer 1

Вы можете использовать текстовое переполнение: многоточие; , которое в соответствии с 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>

Answer 2

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

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>

Answer 3

Да, через свойство text-overflow в CSS 3. Предостережение: пока еще не поддерживается универсально в браузерах.

Answer 4

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

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

Answer 5

Надеюсь, это полезно для вас:

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

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

Answer 7

В при начальной загрузке 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>

Answer 8

Большинство решений используют здесь статическую ширину. Но иногда это может быть неправильно по некоторым причинам.

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

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