Запретить HTML-браузеру обрезку текста и отображение 1/2 текстовой строки - PullRequest
Новая
       10

Запретить HTML-браузеру обрезку текста и отображение 1/2 текстовой строки

7 голосов
/ 29 августа 2010

Допустим, мое окно браузера имеет высоту 105 пикселей, и я показываю текстовый блок, где каждая строка текста имеет высоту 10 пикселей - браузер покажет мне 10 и 1/2 строки в окне (т.е. нижняя строка будет обрезанапо вертикали).

Есть ли способ предотвратить такое поведение и увидеть только 10 строк?

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

примечание. Похоже, что правила @page должны помочь мне в этом, но они применяются только при печати на принтере.

Ответы [ 4 ]

3 голосов
/ 04 сентября 2010

Решения, перечисленные до сих пор, похоже, оставляют текст отрезанным на полпути. С помощью какого-нибудь необычного Javascript вы можете заставить браузер выяснить, где можно вставить несколько эллипсов и обрезать текст. Это будет выглядеть быстро за счет того, что на удивление сложно программировать. Мы обсуждали это подробно в этом посте .

Если вы можете использовать jQuery, вы можете сделать это с помощью функции jQuery: 

<div id="my_div">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Etiam vitae lorem eu ipsum fringilla rhoncus.
</div>
<script>
  $("#my_div").truncateToHeight($("#my_div").text(), 105);
</script>
0 голосов
/ 04 сентября 2010

Возможно, вы могли бы сделать это с помощью многоколоночного трюка CSS3 (установив первый столбец точно таким же высоким и широким, как и экран), но это не поддерживается IE, поэтому вам все равно придется использовать Javascript для достижения этого.

0 голосов
/ 03 сентября 2010

Вы можете использовать метатег 

<head>
<meta name=viewport content="user-scalable=no,width=device-width,height=100px" />
</head>

Или вы можете поместить текст в стилизованный тег div, который выглядит следующим образом: 

<div style="height:100px;text-overflow:hidden;overflow:ellipsis">
text....
</head>

В общем, вам понадобится какой-нибудь основной javascript, если вы хотите сделать текст прокручиваемым или просмотреть остальную часть контента

0 голосов
/ 01 сентября 2010

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

Я уверен, что это не достижимо в чистом CSS, но, вероятно, это было бы возможно при использовании jQuery и скрытого DIV вне страницы. В основном установите скрытый DIV на желаемую ширину, заполните и проверьте высоту с помощью jQuery. Если он слишком высокий, обрежьте текст и попробуйте снова.

...