Question

假设我的浏览器窗口高105像素，我显示一个文本块，其中每行文本高10像素 - 浏览器将在窗口中显示10行和1/2行（即底线将被剪切垂直地）。

是否有某种方法可以防止此行为并且只能看到10行？

我想这样做的原因是我使用HTML小部件（UIWebView）来呈现一个将使用页面翻转范例显示的书。

注意：看起来@page规则可以帮助我实现这一目标，但它们似乎只适用于打印到打印机时。

Answer 1

到目前为止列出的解决方案似乎都将文本中途切断了。使用一些花哨的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>

Answer 2

我猜你在分配的盒子/空间中显示它们时，你不知道要显示多少行。此外，您是否希望将可能无法看到的任何行放在下一页上？

我确信这在纯CSS中无法实现，但可能使用jQuery和一个页外隐藏的DIV。基本上将隐藏的DIV设置为所需的宽度，填充并使用jQuery检查高度。如果它太高，请截断文本然后重试。

Answer 3

您可以使用元标记

<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

Answer 4

您可以使用CSS3多列技巧（将第一列设置为与屏幕一样高和宽），但IE不支持，因此您无论如何都必须使用Javascript来实现它。 / p>

阻止HTML浏览器剪切文本＆amp;显示1/2文本行

4 个答案: