Использование HTML/CSS для ограничения длины предложений

Question

Я вызываю несколько предложений из файла JSON и добавляю его в тег <p>.

<p> 
     Thank you all for another magical night spent together 
     this last sunday at The Hippodrome in Baltimore.Thank yo... 
    <p> 

И я хотел бы, чтобы он короче, даже это уже было сократить в JSON, я я в состоянии использовать чистый CSS или HTML, чтобы ограничить его длина?

Я не нужно какой-либо JavaScript/Jquery предложение, потому что, если приходит к javascirpt легко выполнить эту задачу, я мог бы просто играть с йотом, но в данном случае я хочу, чтобы проверить, есть ли какой-либо чистый HTML и CSS метод может это сделать.

UPDATE 1: Каждый предложить мне преобразовать предложения в к одной строке с помощью white-space: nowrap, а затем скрытый текст, установив text-overflow:ellipsis но есть ограничение, HTML, может только отображать одну строку. Нужно ли еще показывать другую строку?

Answer 1

Если вы одинарный, использование text-overflow:ellipsis атрибутов для достижения одной строки текста, чтобы отобразить многоточие (переполнение …). Конечно, некоторым браузерам также необходимо добавить атрибуты width.

overflow: hidden; 
text-overflow: ellipsis; 
white-space: nowrap; 

Если это многоканальная линия, использовать WebKit CSS расширенный атрибут (WebKit является частной собственностью) -webkit-line-clamp;.Внимание: браузер WebKit или мобильный терминал (большинство - браузер на основе WebKit) легко реализуются в: Это нестандартный атрибут (неподдерживаемое свойство WebKit), он не отображается в черновике спецификации CSS , -webkit-line-clamp используется для ограничения количества строк в тексте, отображаемом блочным элементом. Чтобы достичь этого эффекта, его необходимо сочетать с другими атрибутами WebKit. Общие связывающие свойства:

overflow : hidden; 
text-overflow: ellipsis; 
display: -webkit-box; 
-webkit-line-clamp: 2; 
-webkit-box-orient: vertical; 

Answer 2

вы можете использовать в качестве также ссылку https://developer.mozilla.org/en/docs/Web/CSS/text-overflow

p { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    max-width: 200px; /*width as you want */ 
} 

Answer 3

Используйте этот пример:

<p style="width: 150px;height: 15px;overflow: hidden;"> 
    Thank you all for another magical night spent together 
    this last sunday at The Hippodrome in Baltimore.Thank yo... 
</p> 

Answer 4

CSS и HTML не может получить длину предложения. Итак, у нас нет предела для CSS, и HTML не может получить длину предложения. Таким образом, невозможно задать предельную длину для предложения. Но если вы хотите использовать CSS для усечения строки предложения с максимальной шириной элемента. Вы можете сделать:

p { 
max-width: 100px; 
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 
} 

Answer 5

Вы хотите укоротить текст с CSS, и, судя по всему, вы хотите многострочные текстовые поля, которые усечь правильно в конце (ответ на Анубхав является одно- line). Поскольку для этого не существует чистых опций css (что я знаю), вам, вероятно, понадобится плагин jQuery, такой как clamp.js или аналогичный.

Ответ Вы, вероятно, хотите от другого SO нить, здесь: https://stackoverflow.com/a/33061059/5580153

Edit: Существует также довольно запутанный CSS решение здесь: http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/ хотя это немного взломанный решение, которое я чувствую.

Answer 6

Вы можете использовать text-overflow: ellipsis;. пожалуйста, ознакомьтесь с приведенным ниже примером.

<div id="readmore">Thank you all for another magical night spent together 
     this last sunday at The Hippodrome in Baltimore. 
</div> 

CSS

#readmore { 
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    border: 1px solid #000; 
} 

Для получения дополнительной информации, пожалуйста, через этот reference