7

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

有什么方法可以防止这种行为并且只看到 10 行吗？

我想这样做的原因是我正在使用 HTML 小部件 (UIWebView) 来呈现一本书，该书将以翻页范式显示。

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

4

4 回答 4

3

到目前为止列出的解决方案似乎都将文本中途截断。使用一些花哨的 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>
于 2010-09-03T22:33:32.970 回答
0

You could probably do it with CSS3 multicolumn trickery (seting the first column to be exactly as high and wide as the screen), but that is not supported by IE, so you will have to use Javascript to achieve it anyway.

于 2010-09-04T18:14:14.233 回答
0

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

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

于 2010-08-31T21:08:11.147 回答
0

您可以使用元标记

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

或者您可以将文本放入风格化的 div 标签中，如下所示：

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

总而言之，如果您想让文本可滚动或查看其余内容，您将需要一些主要的 javascript

于 2010-09-03T10:22:50.597 回答