Использование CSS-переполнения текста для изменения количества строк текста в элементе заданной высоты
Я сейчас углубляюсь в разработку некоторых веб-приложений для iPhone (Safari / WebKit) и хочу, чтобы в них были элементы заданной высоты с текстом заголовка и основным текстом, чтобы всегда отображались 3 строки. Если текст заголовка короткий, должны отображаться 2 строки основного текста. Если текст заголовка очень длинный, он должен занимать максимум 2 строки и оставлять 1 строку для основного текста. Всякий раз, когда текст усекается, он должен отображать многоточие в качестве последнего символа.
Я придумала следующее, которое делает все, что мне нужно, за исключением того, что оно не отображает многоточие. Есть ли способ получить это решение, чтобы удовлетворить это последнее требование?
Код ниже, предоставленный Safari http://segdeha.com/assets/imgs/stack-ellipsis.png
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#container {
width: 100px;
}
p {
/* white-space: nowrap; */
font-family: Helvetica;
font-size: 12px;
line-height: 16px;
text-overflow: ellipsis;
max-height: 48px;
overflow: hidden;
border: solid 1px red;
}
strong {
/* white-space: nowrap; */
font-size: 16px;
display: block;
text-overflow: ellipsis;
max-height: 32px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container">
<p>
<strong>Short title</strong>
This is the text description of the item.
It can flow onto more than 2 lines, too,
if there is room for it, but otherwise
should only show 1 line.
</p>
<p>
<strong>Long title that will span more
than 2 lines when we're done.</strong>
This is the text description of the item.
It can flow onto more than 2 lines, too,
if there is room for it, but otherwise
should only show 1 line.
</p>
</div>
</body>
</html>