防止HTML瀏覽器剪切文本並顯示1/2文本行

假設我的瀏覽器窗口高105像素，並顯示一個文本塊，其中每行文本的高度爲10像素 - 瀏覽器會顯示10和1/2行（即底部行將垂直剪切）。防止HTML瀏覽器剪切文本並顯示1/2文本行

有沒有辦法來防止這種行爲，只看到10行？

我想這樣做的原因是我正在使用HTML小部件（UIWebView）來呈現將使用翻頁範例顯示的書。

注意：它看起來像@page規則應該可以幫助我實現這一點，但它們似乎只適用於打印到打印機。

來源

2010-08-29 Rube Vogel

我可能會誤會，但是什麼阻止你將整個東西簡單地包裝在一個'div'中，固定的高度向下舍入到最後一行，並給出'overflow：hidden'？ – 2010-08-29 08:30:33

您可以使用JavaScript獲取視口高度，然後計算並設置所需的線高。我不知道只使用CSS的解決方案。 – 2010-08-29 14:42:52

您是否可以在CSS中縮短行高，使其每行更短？ – markus 2013-01-29 22:24:30

我猜你不知道你要在分配的盒子/空間中顯示它們時要顯示多少行。另外，您還希望將可能無法看到的任何行放在下一頁上？

我確定這在純CSS中是無法實現的，但它可能會使用jQuery和一個離頁隱藏的DIV。基本上將隱藏的DIV設置爲所需的寬度，填充並使用jQuery檢查高度。如果太高，請截斷文本並重試。

來源

2010-08-31 21:08:11

您可以使用元標籤

 
<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想讓文字滾動或查看內容的其餘部分

來源

2010-09-03 10:22:50

迄今爲止列出的解決方案似乎都將文本中途截斷。使用一些花哨的Javascript，你可以讓瀏覽器找出在哪裏貼一些省略號並截斷你的文本。這會看起來很快，但是卻很難編程。我們在this post中詳細討論過這個問題。

如果你可以使用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>

來源

2010-09-03 22:33:32

你也許可以用CSS3多列弄虛作假做（塞汀第一列是完全一樣的高和寬爲屏幕），但IE不支持，所以你將不得不使用JavaScript來實現它。

來源

2010-09-04 18:14:14 Tgr

防止HTML瀏覽器剪切文本並顯示1/2文本行

回答

相關問題