防止 HTML 浏览器剪切文本和文本显示 1/2 文本行
假设我的浏览器窗口高 105 像素，我显示一个文本块，其中每行文本高 10 像素 - 浏览器将在窗口中显示 10 又 1/2 行（即底线将被垂直剪切）。
有什么方法可以防止这种行为并且只能看到 10 行吗？
我想这样做的原因是我正在使用 HTML 小部件 (UIWebView) 来渲染一本书，该书将以翻页范例显示。
注意：看起来 @page 规则应该可以帮助我完成此任务，但它们似乎仅在打印到打印机时适用。
Let's say my browser window is 105 pixels high and I show a text block where each line of text is 10 pixels high - the browser will show me 10 and 1/2 lines in the window (i.e. The bottom line will be clipped vertically).
Is there some way to prevent this behavior and see only 10 lines?
The reason I want to do this is that I am using a HTML widget (UIWebView) to render a book that will be displayed with a page-flipping paradigm.
note: It looks like @page rules are supposed to help me accomplish this but they only seem to apply when printing to a printer.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
到目前为止列出的解决方案似乎都将文本截断了一半。使用一些奇特的 Javascript，您可以让浏览器找出在哪里粘贴一些省略号并截断文本。这看起来很敏捷，但代价却是编程极其困难。我们在这篇文章中详细讨论了这个问题。
如果你可以使用 jQuery，你可以用我的 jQuery 函数来完成它：
The solutions listed so far seem to all leave the text cut off half way. With some fancy Javascript you can have the browser figure out where to stick some ellipses and truncate your text. This will look snappy at the expense of being surprisingly difficult to program. We discussed this at length in this post.
If you can use jQuery, you could accomplish it with my jQuery function there thusly:
您可以使用元标记
，或者您可以将文本放入样式化的 div 标记中，如下所示：
总而言之，如果您想让文本可滚动或查看其余内容，您将需要一些主要的 javascript
You can use the meta tag
Or you can put the text into a stylized div tag that looks like:
All in all you would need some major javascript if you wanted to make the text scrollable or view the rest of the content
您可能可以使用 CSS3 多列技巧（将第一列设置为与屏幕一样高和宽）来做到这一点，但 IE 不支持这一点，因此您必须使用 Javascript 来实现它。
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.
我猜当您在分配的框/空间中显示它们时，您不知道要显示多少行。另外，您希望将任何可能无法完整看到的行放置到下一页上吗？
我确信这在纯 CSS 中是无法实现的，但使用 jQuery 和页外隐藏 DIV 可能是可能的。基本上将隐藏的 DIV 设置为所需的宽度、填充并使用 jQuery 检查高度。如果太高，请截断文本并重试。
I'm guessing that you don't know how many lines you are going to display when you come to display them in the allocated box/space. Also, you want any lines that may not be seen in their entirety placed onto the following page?
I'm sure this isn't achievable in pure CSS, but it would probably be possible using jQuery and an off-page hidden DIV. Basically set the hidden DIV to the desired width, populate, and check the height using jQuery. If it's too tall, truncate the text and try again.