Учитывая, что у вас есть HTML-раздел / раздел с заголовком, несколько тегов абзаца (или что-нибудь, что приведет к разметке тегов уровня блока, на самом деле - h1-6, ul, ol, p и т. Д.) И, возможно, нижний колонтитул или другой контент, как сделать так, чтобы «контент» вписывался в это поле?
Вот скриншот проблемы:
Структура HTML выглядит примерно так:
<section class='box'>
<header>
<h2 class='title'>A Title</h2>
</header>
<footer>[the image]</footer>
<div class='content'>
<p></p>
<p></p>
...
<p></p>
</div>
</section>
Я пытался установить text-overflow: ellipsis для тегов section, div и p, но это не работает. Это возможно?
Действительно просто смотрю, чтобы увидеть, что здесь и что невозможно:
Возможно
- Вы, безусловно, можете использовать jQuery для перебора содержимого в блоке, найти отрубленный элемент блока (top box bottom) и обрезать текст. Но это последнее средство, так как оно быстро превращается в проблему с производительностью из-за большого количества коробок и всех различных крайних случаев.
- Вы можете создать «сводный» текстовый блок на стороне сервера, который вписывается в размеры блоков. Но это не сработает, если вы измените размер шрифта или размер поля.
- Вы можете создать набор правил
font-size и line-height, которые заставляют текст как минимум обрезаться между строками, но это очень хрупко.
- Как и @Madmartigan в комментариях, вы также можете добавить градиент внизу окна, чтобы затемнить текст.
Невозможно
- Вы не можете установить
text-overflow: ellipsis в этом случае (по крайней мере из вещей, которые я пробовал).