Если я поместил текст в контейнер с заданной высотой и скрытым переполнением, я часто получаю окончательную строку, которая может быть отключена. Пример jsFiddle или изображение:
Есть ли способ, чтобы эта строка не отображалась полностью, а не чтобы это произошло?
Сценарий заключается в том, что у меня есть столбцы, которые являются динамической высотой (100% от родительской высоты, что составляет 80% от высоты тела), содержащей текст в блоге, и я хочу отобразить "прочитать все" внизу если есть переполненный текст (легко определить). На данный момент это выглядит просто ужасно, если над ним сидит полупрозрачный текст.
Я не могу удалить переполнение, так как столбцы должны заканчиваться перед навигацией, которая находится внизу страницы.
Вы можете вдохновить вас на свойство text-overflow, но вы должны сделать это с помощью JavaScript для кратких строк: http://pvdspek.github.com/jquery.autoellipsis/ (через С помощью CSS используйте "..." для переполненного блока многострочных каналов)
см. это мой код ниже
<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;**
Вы можете увеличить или уменьшить значение line-height
в соответствии с вашим комфортом
Удалите overflow:hidden
div
{
width: 100px;
height: 92px;
background: black;
color: white;
}
просто добавьте атрибут column-width, он будет работать. в вашем примере ширина столбца: 100px