Могу ли я полностью скрыть строки текста, которые частично отрезаны?

Если я поместил текст в контейнер с заданной высотой и скрытым переполнением, я часто получаю окончательную строку, которая может быть отключена. Пример jsFiddle или изображение:

Есть ли способ, чтобы эта строка не отображалась полностью, а не чтобы это произошло?

Сценарий заключается в том, что у меня есть столбцы, которые являются динамической высотой (100% от родительской высоты, что составляет 80% от высоты тела), содержащей текст в блоге, и я хочу отобразить "прочитать все" внизу если есть переполненный текст (легко определить). На данный момент это выглядит просто ужасно, если над ним сидит полупрозрачный текст.

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

Ответ 1

Вы можете вдохновить вас на свойство text-overflow, но вы должны сделать это с помощью JavaScript для кратких строк: http://pvdspek.github.com/jquery.autoellipsis/ (через С помощью CSS используйте "..." для переполненного блока многострочных каналов)

Ответ 2

см. это мой код ниже

 <li style="color: Black; font-weight: bold; oveflow:hidden; line-height: 1.2em;height: 2.6em; ">Page Size
                    <select id="ddlOrderstoDisplay" style="width: 50px;">
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="75">75</option>
                        <option value="100">100</option>
                        <option value="150">150</option>
                    </select>               
                </li>

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

**overflow: hidden;
line-height: 1.2em;
height: 3.6em;**

Ответ 3

Вы можете увеличить или уменьшить значение line-height

в соответствии с вашим комфортом

Ответ 4

Удалите overflow:hidden

div
{
    width: 100px;
    height: 92px;
    background: black;
    color: white;
}

Ответ 5

просто добавьте атрибут column-width, он будет работать. в вашем примере ширина столбца: 100px