Использование 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>
 peteorpeter07 июн. 2012 г., 05:06
О JavaScript не может быть и речи?
 Adam Youngers07 июн. 2012 г., 22:24
Это к плохим медиа-запросам не поддерживает это. Было бы здорово, если бы вы могли сделать что-то вроде ... @media id = & quot; myIdHere & quot; и (max-height: 32px) {strong {content: & apos; ... & apos ;;}}
 Andrew Hedges01 июл. 2009 г., 05:49
я смотрел наiphone.facebook.com в Safari (подмена пользовательского агента iPhone), и похоже, что они делают это на стороне сервера. Я подозреваю, что я обречен на ту же судьбу.
 Symen Timmermans02 мая 2011 г., 16:39
Я хотел сделать что-то подобное в прошлом. В итоге я попытался разделить строки и добавить многоточие на стороне сервера. Это привело к тому, что я узнал, насколько широким и высоким будет текст (в пикселях). В конце концов я разочаровался.
 Calvin12 июн. 2012 г., 23:13
Вам нужно будет указатьwhite-space:nowrap получитьtext-overflow работать правильно. Это означает, что вы ограничены одной строкой текста. Таким образом, похоже, что то, что вы хотите, не достижимо только с помощью CSS. :( (источник:quirksmode.org/css/textoverflow.html)

Ответы на вопрос(4)

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

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

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

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

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

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

Попробуй это:jsfiddle.net/7BXtr/. It only uses CSS (no JavaScript).

В основном текст имеетoverflow: hidden применяется и... позиционируется после него.

Недостатки:

An ellipsis will always appear after the description, even if it is short. The ellipses always appear at the same positions on the right.
 22 сент. 2012 г., 23:37
@LEOPiC Я знаю, это просто хакерский способ получить его почти там.
 22 сент. 2012 г., 18:12
Проблема в том, что эллипсы всегда будут вставлены, даже если текст слишком короткий.

Ваш ответ на вопрос