многоточие переполнения текста: избегать переноса слов

На моей веб-странице у меня есть div с фиксированной шириной и с использованием следующего CSS:

width: 200px; 
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

Многоточие работает, проблема в том, что оно сокращает последнее слово, и я хотел, чтобы оно поместило многоточие (...) в окончание полного слова.

Например, если у меня есть текст: «stackoverflow - лучший», и если его нужно вырезать ближе к концу, я хочу, чтобы он отображал «stackoverflow - это ...» вместо «stackoverflow - это be ...» "

Ответы на вопрос(3)

точка точка точка.

Он также работает для многострочного текста и быстро адаптируется, если текст переформатируется, например. если размер экрана меняется. Он также включает в себя умное усечение путей, напримерhttp://example.com/some/long/.../path.html

Помните о возможности возникновения проблем с синхронизацией по ширине в тех случаях, когда ширина изменяется или становится недоступной по причинам, которые плагин может не ожидать, например, если текст изначально скрыт или если он меняет шрифт (например, загрузка веб-шрифтов в некоторых браузерах) , Может потребовать повторного применения или применения после таких изменений.

Но в 99% случаев плагин кажется быстрым и надежным.

https://jsfiddle.net/warphLcr/

<style>
  .foo {
    /* Make it easy to see where the cutoff point is */
    border: 2px solid #999;

    padding-right: 18px; /* Always have room for an ellipsis */
    width: 120px;
    height: 1.1em; /* Only allow one line of text */
    overflow: hidden; /* Hide all the text below that line */
    background-color: #fff; /* Background color is required */
  }
  .foo > span {
    display: inline-block; /* These have to be inline block to wrap correctly */
    position: relative; /* Give the ellipsis an anchor point so it's positioned after the word */
    background-color: #fff; /* Cover the ellipsis of the previous word with the same background color */
    white-space: pre; /* Make sure the only point where wrapping is allowed is after a whole word */
  }
  .foo > span:after {
    position: absolute; /* Take the ellipsis out of the flow, so the next item will cover it */
    content: "…"; /* Each span has an ellipsis */
  }
  .foo > span:last-child:after {
    content: ""; /* Except for the last one */
  }
</style>

<div class="foo">
  <!-- These *must not* have white space between them, or it will collapse to a space before the next word, and the ellipsis will become visible -->
  <span>stackoverflow</span><span> is</span><span> the</span><span> best</span>
</div>
 Hunter Perrin18 нояб. 2016 г., 18:54
Этот код не перебрал одно большое длинное слово, которое переполняется. Поэтому, если вы хотите сделать это, оберните каждое слово в другой промежуток (чтобы каждое слово было внутри двух промежутков) и добавьте этот код:
 Hunter Perrin18 нояб. 2016 г., 18:56
.foo> span> span {/ * Вы должны использовать два интервала, если вы хотите использовать многоточие для одного гигантского слова * / display: inline-block; максимальная ширина: 100%; переполнение: скрытое; } .foo> span {max-width: 100%; ... [остальной код]
 aero15 мая 2018 г., 21:13
Я ценю людей, которые находят решения "невозможных" проблем.

text-overflow: ellipsis-word, что сделало бы это, но это не было реализовано в браузерах и было удалено из черновиков CSS3.

Ваш ответ на вопрос