检查元素的内容是否溢出？
检查元素的内容是否溢出？
提问于 2012-02-18 02:22:04
检测元素是否溢出的最简单方法是什么？
我的用例是，我想限制某个内容框的高度为300px。如果内部内容比这更高，我会用溢出将其截断。但是如果它溢出了，我想要显示一个“更多”按钮，但是如果没有，我不想显示那个按钮。
有没有简单的方法来检测溢出，或者有更好的方法？
回答 12
Stack Overflow用户
回答已采纳
发布于 2015-12-16 05:42:12
如果你只想为更多的内容显示一个标识符，那么你可以用纯CSS来实现。为此，我使用纯滚动阴影。诀窍是使用background-attachment: local;。您的css如下所示：
.scrollbox {
overflow: auto;
width: 200px;
max-height: 200px;
margin: 50px auto;
background:
/* Shadow covers */
linear-gradient(white 30%, rgba(255,255,255,0)),
linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
/* Shadows */
radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),
radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
background:
/* Shadow covers */
linear-gradient(white 30%, rgba(255,255,255,0)),
linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
/* Shadows */
radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
background-repeat: no-repeat;
background-color: white;
background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
/* Opera doesn't support this in the shorthand */
background-attachment: local, local, scroll, scroll;
}<div class="scrollbox">
<ul>
<li>Not enough content to scroll</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div class="scrollbox">
<ul>
<li>Ah! Scroll below!</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>The end!</li>
<li>No shadow there.</li>
</ul>
</div>
您可以在http://dabblet.com/gist/2462915上找到代码和示例
你可以在这里找到一个解释：http://lea.verou.me/2012/04/background-attachment-local/。
Stack Overflow用户
发布于 2012-03-03 07:01:43
元素可以垂直溢出、水平溢出或两者都溢出。如果DOM元素溢出，此函数将返回一个布尔值：
function isOverflown(element) {
return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}
function isOverflown(element) {
return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}
var els = document.getElementsByClassName('demos');
for (var i = 0; i < els.length; i++) {
var el = els[i];
el.style.borderColor = (isOverflown(el) ? 'red' : 'green');
console.log("Element #" + i + " is " + (isOverflown(el) ? '' : 'not ') + "overflown.");
}.demos {
white-space: nowrap;
overflow: hidden;
width: 120px;
border: 3px solid black;
}<div class='demos'>This is some text inside the div which we are testing</div>
<div class='demos'>This is text.</div>
ES6示例：
const isOverflown = ({ clientWidth, clientHeight, scrollWidth, scrollHeight }) => {
return scrollHeight > clientHeight || scrollWidth > clientWidth;
}Stack Overflow用户
发布于 2012-02-18 02:33:53
将element.scrollHeight与element.clientHeight进行比较应该可以完成此任务。
下面是来自MDN的解释Element.scrollHeight和Element.clientHeight的图片。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9333379
复制相关文章
相似问题
腾讯云开发者
