У меня есть случай, когда я хочу показать текст, который занимает всю ширину своего контейнера и не занимает более одной строки, но если он имеет символы-разделители строк, он не показывает последовательные строки.
Я попробовал следующий код в чистом CSS:
.line-container {
width: 230px;
height: 20px;
}
.single-line {
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}<div class="line-container">
<div class="single-line">Lorem
ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor
amet Lorem ipsum dolor amet Lorem ipsum
dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet
Lorem ipsum dolor amet Lorem ipsum dolor amet</div>
</div>Это работает нормально, но только в том случае, если нет символов возврата строки, так как свойство white-spaceпри установке nowrapудаляет разрывы строк. Другие возможные значения normal, pre, pre-wrapи pre-lineне очень помогли, так как тогда текст не выводился на 1 строку.
Я также читал, что есть несколько способов интерпретировать наличие новой строки с символами \r и \n ( возврат строки и новая строка ) в следующих ссылках:
https://es.wikipedia.org/wiki/Новая_Лайн
Я предполагаю, что если я читаю текст из базы данных или файла и получаю его с сервера, это может принести мне много неудобств, если он был написан в разных операционных системах.
Есть ли решение CSS, о котором я не знаю, или мне следует использовать фрагмент javascript для создания компонента, подобного тому, который я вам показываю?
Наконец-то я получил то, что хотел. Мне не нужно было использовать javascript, только CSS.
Таким образом, я смог получить переносимое решение для любой среды, и невероятно, согласно спецификации, оно может работать даже в Internet Explorer 6.
Оказывается, свойство,
white-spaceесли установлено вpreif, сохраняет разрывы строк, оно даже учитывает, когда сталкивается с элементом,<br/>но создает этот забавный эффект.Что он делает, так это создает небольшие обрезанные фрагменты текста. Когда свойство
text-overflowустановлено на него, оноellipsisобрезает текст, превышающий размер своего контейнера, поэтому необходимо использовать егоoverflow: hidden;вместе со свойствомwhite-space, чтобы отображалось многоточие...в случае, если текст больше.Добираясь туда, мне просто нужно было нанести еще один
overflow: hidden;на контейнер, и все!Для этого необходимо использовать этот небольшой фрагмент css.
Примечание. Согласно документации свойства
white-space, это решение не работает, если оно используется только\rв качестве разделителя. Согласно статье SO , это относится только к старым компьютерам Mac, что я считаю вполне приемлемым. Если это так, вам придется заменить возвращаемые символы с\rпомощью\njavascript для достижения этого эффекта.Родительский div, содержащий div, отображающий текст, имеет фиксированный размер, что не позволяет корректно отображать текст, исключить класс
.line-containerсм. онлайн-пример здесь
Я также говорю вам, что если в вашем тексте есть разрывы строк или возвраты строк, с помощью Javascript вы можете отфильтровать эти непечатаемые символы, например:
Используя это регулярное выражение и метод replace(), вы можете удалить разрывы строк и возвраты:
Вы должны добавить,
"<br/>"где вы хотите сделать разрыв строкиПричина в том, что html не интерпретировал «ввод» как разрыв строки =)