Я хочу, чтобы ограничить текст двумя линиями внутри <div>Ограничение текста в две строки с помощью CSS только
Если текст приходит в более чем две строки, то она должна скрыть остальную часть текста после показа двух строк
Например:
Длинный текст продолжает
вниз по дороге
в переулок.
* * * это должно стать:
Длинный текст продолжает
вниз по дороге
Я должен сделать это, используя только CSS ..
Пожалуйста, предложите?
Как насчет того, чтобы высота высоты вашего div была ровно двумя линиями высотой и с использованием overflow:hidden;?
Например:
<style type="text/css">
.twolines
{
font-size: 20px;
height: 48px;
overflow: hidden;
}
</style>
Вы также можете использовать em ценности и line-height:
<style type="text/css">
.twolines
{
font-size: 1em;
line-height: 1em;
height: 2em;
overflow: hidden;
}
</style>
Вот полный, рабочий пример:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.twolines
{
font-size: 1em;
background-color: silver;
line-height: 1em;
height: 2em;
overflow: hidden;
}
.twolines p
{
margin: 0;
}
</style>
</head>
<body>
<div class="twolines">
<p>Long text continues</p>
<p>down the road</p>
<p>into a lane.</p>
</div>
</body>
</html>
Я пробовал его, установив высоту и переполнение div: скрытый, но все же он появляется в трех строках – user2385986
Затем увеличьте 'line-height: 25px'. Это может решить вашу проблему. –
Я дал его вот так: – user2385986
Вот Solution.
HTML-:
<div>The quick brown fox jumps over the lazy dog.</div>
CSS-:
div{background:gray; width:100px; height:40px; overflow:hidden;}
Надеется, что это помогает.
проверить http://stackoverflow.com/questions/3922739/limit-text-length-to-n-lines-using-css – MikeB