Я использую text-overflow: многоточие, чтобы сделать максимальное количество строк в моей статье с контейнером. Он работает нормально, но ограничивает запуск после 1 строки, и мне нужно установить его больше. (например, 3-4) проблема заключается в том, как бы я ни старался, она перемещала все в контейнере с моей статьей или не делала никаких изменений.
Я новичок в CSS, поэтому я часто делаю что-то неправильно, могу ли помочь мне с этим?
DEMO: Fiddle LIVE WEBSITE
Часть CSS с эллипсисом (полный CSS/HTML можно найти на демонстрационных примерах выше):
#article-container p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 168px;
}
#article-container p.more {
overflow: hidden;
padding: 0;
white-space: normal;
width: auto;
}
Итак, ребята здесь, кто-нибудь, кто может помочь мне установить, чтобы он ограничивал больше строк не только одним?
Спасибо, что прочитали этот пост
В Elipse в CSS только 1 строка. Есть несколько библиотек javascript, которые помогут вам выполнить то, что вы хотите. Например, http://dotdotdot.frebsite.nl/.
max-height
и max-width
и установить overflow:hidden
. Но это, вероятно, покажет половину буквы в некоторых браузерах в зависимости от содержимого.
Вы не можете сделать больше, чем 1 строку с CSS (по крайней мере, не таким образом, который совместим с большинством браузеров), но вы можете обрезать его с помощью PHP, если вы не хотите использовать Javascript.
<?php
function Truncate($string, $length=50, $stopanywhere=false) {
if (strlen($string) > $length) {
//limit hit!
$string = substr($string,0,($length -3));
if ($stopanywhere) {
//cut off anywhere
$string .= '...';
} else{
//cut off after word
$string = substr($string,0,strrpos($string,' ')).'...';
}
}
return $string;
}
?>
Определите строку $ с текстом, текст, который вы хотите ограничить.