В настоящий момент я глубоко вовлечен в разработку веб-приложений iPhone (Safari/WebKit) и хочу иметь элементы заданной высоты с текстом заголовка и текстовым текстом, чтобы отображались 3 строки. Если текст заголовка короткий, должны отображаться две строки основного текста. Если текст заголовка очень длинный, он должен занимать максимум две строки и оставить 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>