简体繁体 English

使用javascript和css隐藏不完全可见的文本行

[英]hide lines of text not fully visible with javascript & css

原文 2011-01-22 20:04:27 7 4 javascript/ jquery/ html/ css

I think this might be impossible, but is there some way using JQuery to prevent lines of text not fully visible from showing up on the screen when a user scrolls until the entire line is visible? 我认为这可能是不可能的，但是当用户滚动直到整条线可见时，是否有某种方法可以使用JQuery来阻止不完全可见的文本行显示在屏幕上？ That is, we want to prevent something like this from showing up: 也就是说，我们希望阻止这样的事情出现：

Thanks! 谢谢！

4 个解决方案

I agree with @rahmanisback, don´t mess with the user's browsing experience. 我同意@rahmanisback，不要弄乱用户的浏览体验。

However, what would perhaps be a nice "inbetween" solution, is using a transparency gradient so that the bottom pixels fade out. 然而，可能是一个很好的“inbetween”解决方案，是使用透明度渐变，以便底部像素淡出。 But that would apply also to "whole" lines, so perhaps that´s not a good solution for your problem. 但这也适用于“整体”线，所以也许这不是解决问题的好方法。

I don't know if there is something out there to do that. 我不知道那里有什么东西可以做到。 But I think it will cause confusion more that it would make any visual enhancement ever. 但我认为它会引起更多混乱，它会使任何视觉增强。 A user will not be happy when scrolling down and finds lines just "popup" suddenly, in opposite to normally easing out as a result of scrolling action. 向下滚动时用户不会感到高兴，并且突然发现线条只是“弹出”，与滚动动作通常缓和相反。

After all, when we speak about a scrollable HTML element with scrollbars visible, a user is aware text might be partially shown and that is normal and needs to be scrolled down to read the remaining. 毕竟，当我们谈到滚动条可见的可滚动HTML元素时，用户意识到文本可能部分显示，这是正常的，需要向下滚动才能读取剩余的内容。 I really would not recommend that. 我真的不会这么推荐。

But for a technical answer, I think you would need to fix the CSS line-height property of that scrolling element, say make it 8px or whatever fits your layout. 但是对于技术答案，我认为你需要修复滚动元素的CSS line-height属性，比如说它是8px或者适合你的布局。 Then, capture the scroll event and devide the jQuery scrollTop() by that CSS line-height, then check the results: if it have a fraction then that means there is a "partially visible" line. 然后，捕获scroll事件并通过CSS line-height分配jQuery scrollTop（），然后检查结果：如果它有一个分数，则表示存在“部分可见”行。 Don't forget aout margin and padding that can cause mistakes when calculating. 不要忘记计算时可能导致错误的边距和填充。

I believe I have had this problem also, in that you have a div with a specific height and overflow hidden. 我相信我也有这个问题，因为你有一个具有特定高度和隐藏溢出的div。

Thinking about it i would resize the div based on the line-height of the text in the div. 想一想，我会根据div中文本的行高来调整div的大小。

Change the height of div so that it equals a multiple of the line height of the containing text.... ie 3 lines of text with line-height = 16 change the div height from 50 to 48px. 更改div的高度，使其等于包含文本的行高的倍数....即，行高= 16的3行文本将div高度从50更改为48px。

( i posted this at the same time as rahmanisback' answer ) （我和rahmanisback的回答同时发布了这个）

Hypothetically you could measure the height of text area, measure the height of the line, find scroll position do some math and then have some way of hiding text that is not fully exposed yet (eg Using a white div of x height depending on your math). 假设你可以测量文本区域的高度，测量线条的高度，找到滚动位置做一些数学，然后有一些方法来隐藏尚未完全暴露的文本（例如，根据你的数学使用x高度的白色div ）。 However, it seems like a lot of trouble to go to for something that is usually a non-issue. 然而，去寻找通常没有问题的东西似乎很麻烦。 You might also be able to do something with the overflow property, but you might have some issues with that I'm not sure. 您也可以使用overflow属性执行某些操作，但是您可能会遇到一些我不确定的问题。

I thought of an alternate method that would be easier to implement. 我想到了一种更容易实现的替代方法。 Capture scroll events and then change it to the closest multiple of line height. 捕获滚动事件，然后将其更改为最接近行高的倍数。