Использование текстового переполнения CSS для изменения количества строк текста в элементе заданной высоты

В настоящий момент я глубоко вовлечен в разработку веб-приложений 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>

Ответ 1

Одним из решений этой проблемы является выцветание текста, а не добавление многоточия. Если это приемлемая альтернатива для вас, пожалуйста, прочитайте.

Так как высота строки фиксирована в 16px, вы можете использовать простое png-изображение с градиентом (или использовать градиент css3), который переходит от прозрачного к соответствующему цвету фона и позиционирует его в нижнем правом углу абзаца.

То же самое будет работать для заголовка, если вы поместите изображение градиента 16px сверху, чтобы оно было видимым только в том случае, если заголовок достигнет двух строк (благодаря скрытию переполнения).

Ответ 2

Вы можете указать размер шрифта, который будет использоваться в этом поле (font-size), затем исправить height и width поля (потому что теперь вы знаете, сколько строк размера font-size может поместиться), а затем используйте свойство overflow (не text-overflow)

Ответ 3

Попробуйте следующее: jsfiddle.net/7BXtr/. Он использует только CSS (без JavaScript).

В принципе, текст имеет overflow: hidden, и ... располагается после него.

Downsides:

После описания всегда будет отображаться многоточие, даже если оно короткое.
Эллипсы всегда отображаются в тех же позициях справа.

Ответ 4

Я знаю, что это слишком поздно. Но для тех, кто ищет ту же проблему: Я развиваюсь над ответом Магнуса Магнуссона.

Чтобы создать полупрозрачный оттенок, вы можете использовать свойство box-shadow, которое можно использовать для создания эффекта внутреннего оттенка.