html – 如何使用CSS显示元素是否超过其父级的大小？

概述假设我有一个包含另一个div .child的div .parent.可以,如果是这样,当.child超过.parent的宽度时,如何使用CSS显示指示(即图标)？ 我已经使用jQuery完成了我的目标(参见下面的示例),但我正在寻找一个仅限CSS的解决方案,因为我正在努力保持我的jQuery使用尽可能低. 注意：.child div具有动态宽度. 另一个注意事项：我不想编辑div的内容 var x 假设我有一个包含另一个div .child的div .parent.可以,如果是这样,当.child超过.parent的宽度时,如何使用CSS显示指示(即图标)？

我已经使用jquery完成了我的目标(参见下面的示例),但我正在寻找一个仅限CSS的解决方案,因为我正在努力保持我的jquery使用尽可能低.

注意：.child div具有动态宽度.

另一个注意事项：我不想编辑div的内容

var x = $('.child').offset().left + $('.child').wIDth();var y = $('.parent').offset().left + $('.parent').wIDth();if (x > y) {  var z = x - y;  $('.child')    .append($('<div></div>')      .CSS('left',z - 10)      .CSS('position','absolute')      .CSS('top',$('.child').height() / 2 - 10)      .text('>'));}

.parent {  position: relative;  border: 1px solID #000;  height: 200px;  wIDth: 200px;  overflow: hIDden;}.child {  position: absolute;  top: 40px;  border: 1px solID red;  height: 100px;  wIDth: 400px;}

<script src="https://AJAX.GoogleAPIs.com/AJAX/libs/jquery/2.0.0/jquery.min.Js"></script><div >  <div >    Some text  </div></div>

解决方法 我读了你的问题和评论.我有一个想法.
是的,我认为你的问题的最佳方法是使用JavaScript.

但我决定找到替代方案:)

这就是为什么我花了10分钟的时间来解决这个问题.

是的,它仅适用于webkit浏览器.但这是可能的.

.parent {  position: relative;  border: 1px solID #000;  height: 200px;  wIDth: 200px;  overflow:auto;}.child {  position: absolute;  top: 40px;  border: 1px solID red;  height: 100px;  wIDth: 400px;}.parent1 {  position: relative;  border: 1px solID #000;  height: 200px;  wIDth: 200px;  overflow:auto;}.child1 {  position: absolute;  top: 40px;  border: 1px solID red;  height: 400px;  wIDth: 100px;}::-webkit-scrollbar {      background: transparent;}::-webkit-scrollbar-button:horizontal:end  {    border-top: 8px solID transparent;    border-bottom: 8px solID transparent;    border-right: 8px solID transparent;    border-left:8px solID red; }::-webkit-scrollbar-button:vertical:end  {    border-left: 8px solID transparent;    border-bottom: 8px solID transparent;    border-right: 8px solID transparent;    border-top:8px solID blue; }

<div >  <div >    Some text  </div></div><div >  <div >    Some text  </div></div>

总结

以上是内存溢出为你收集整理的html – 如何使用CSS显示元素是否超过其父级的大小？全部内容，希望文章能够帮你解决html – 如何使用CSS显示元素是否超过其父级的大小？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。