Javascript/xhtml - 使用overflow:hidden发现div中内容的总宽度
在这个问题中，我们讨论了如何使用CSS的overflow:hidden属性来控制<div>元素中的内容宽度。这个属性可以隐藏超出<div>元素的内容，并防止滚动条的出现。
在JavaScript和XHTML中，<div>元素是一个常用的容器，可以用来组织和布局页面中的其他元素。<div>元素通常是块级元素，这意味着它们会占据整个可用宽度。通过设置overflow:hidden属性，可以控制<div>元素中的内容宽度，并确保内容不会超出<div>元素的边界。
以下是一个简单的示例，演示了如何使用overflow:hidden属性来控制<div>元素中的内容宽度：
<!DOCTYPE html>
<html>
<head><style>
.container {
width: 200px;
height: 100px;
border: 1px solid black;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<p>这是一个很长的文本，它的宽度超出了容器的宽度。但是，由于我们设置了overflow:hidden属性，这个文本将被裁剪，并且不会显示在页面上。</p>
</div>
</body>
</html>在这个示例中，我们创建了一个带有overflow:hidden属性的<div>元素，并在其中添加了一个很长的文本。由于<div>元素的宽度有限，文本将被裁剪，并且不会显示在页面上。
总之，overflow:hidden属性是一种非常有用的CSS技巧，可以帮助您控制<div>元素中的内容宽度，并确保内容不会超出<div>元素的边界。
相关·内容
4回答
Javascript/xhtml -发现div中内容的总宽度和overflow:hidden
javascript、css、xhtml
我正在写一个基于javascript的相册，带有一个水平滚动的缩略图栏。
我希望缩略图栏在到达最后一个缩略图时停止滚动。为此，我需要找到div内容的总宽度-最好不要将所有缩略图和边距的宽度相加。我在我的window.onload函数中添加了一个警告，这样我就可以在不同的浏览器中测试各种元素维度函数。目前它显示的是scrollW
浏览 0提问于2009-01-08得票数 1
回答已采纳
1回答
css包覆面提取div比其父包络处理宽
html、css
;width:100%;height:24px;overflow:hidden;}div.tab {float:left;}
将所有标签插入#tablist中。然而，一旦屏幕上显示的标签超过了容量，它们就会换到下一行(尽管你看不到它，显然是因为#tabbar的overflow:hidden)，#tablist的<
浏览 3提问于2010-09-02得票数 0
2回答
谁能给我解释一下<文章>的大小为什么不正确以及如何修复它？
html、css
正如你所看到的，如果没有足够的文本，底部的灰色线条会比应该的要高得多。谁能解释一下为什么“文章”的hitbox不包括“标题”？以及如何修复它?谢谢。
浏览 0提问于2012-06-28得票数 1
回答已采纳
1回答
IE8文本-无固定宽度的溢出
css、internet-explorer-8
在使用文本溢出和隐藏溢出时，我在IE8中遇到了问题。尽管IE8正确地修剪了文本并从视图中隐藏了它的溢出，但带有截断文本的跨度仍然超出了父元素的宽度。在span或其父元素上使用固定宽度可以很好地工作，但不幸的是，我不能使用固定宽度。我尝试在截断的span元素上使用宽度:100%和最大宽度，并在父元素上设置最大宽度
浏览 0提问于2013-03-31得票数 0
2回答
在outlook 2010中中断html电子邮件中的长词
html、html-email、outlook-2010
我接受最终用户的输入并将其插入到HTML电子邮件中。但是，如果最终用户输入一个很长的URL或非常长的单词，它会将列或div扩展到超出指定的宽度，从而破坏我在Outlook 2010中的HTML布局。在Chrome、火狐、IE7+和Safari中，我可以使用“style=-layout:fixed”来强制表格列到一定的宽度。有了div，在Chrom
浏览 4提问于2012-04-11得票数 19
回答已采纳
1回答
Vue -过渡时期的文本溢出
javascript、html、vue.js、vuejs2
我在Vue中创建了一个转换，一个DIV从左向右移动，而另一个在它旁边扩展以填充页面。当转换被触发时，我如何删除“抽动”并阻止文本溢出到div中？</div>
</div>
浏览 2提问于2020-05-12得票数 0
回答已采纳
2回答
使用CSS在IE6中滚动DIVs
asp.net、css、internet-explorer-6
我一直在用ASP.NET写一个小布告栏网站，我做的任何事都不能让它在IE6中正常工作。主页有一个标题DIV，其下方是内容区域。在这个区域内还有三个区域，左上角是一个搜索工具，它下面是一个通知列表，当前显示的通知位于这两个区域的右侧。搜索和通知列表区域的宽度为240px，显示的通知区域占据了其余宽度。问题是，如果内容大于显示区域(即overflow:auto style)，通知列表和
浏览 3提问于2009-07-09得票数 0
回答已采纳
2回答
检查innerHTML是否超过父级的宽度或高度
javascript、html、css
我有一个固定宽度和固定高度的父级div。<div style="width:20px;height:20px;overflow-x:hidden;overflow-y:hidden;">
A
浏览 6提问于2013-11-11得票数 1
回答已采纳
3回答
如何获得显示为弯曲方向的块的实际宽度:列正确地显示？
javascript、css、flexbox
<div class="box">3</div> <div class="box">5</div>
<div class="box<div class="box">10&l
浏览 0提问于2017-01-16得票数 1
回答已采纳
3回答
CSS浮动正在包装
html、css
这可能是简单的修复，但我在网上搜索没有任何运气。我需要的是一长排的按钮彼此相邻，以便长条是固定的，并可从左到右滚动请在此处查看视觉问题
当前的代码是
浏览 0提问于2013-12-21得票数 2
5回答
如何设置<td>宽度以直观地截断其显示的内容？
html、css、html-table、column-width、column-sizing
;td1.style.overflow = "auto";我意识到，我可能会使用DIV，但我不想使用，因为表是从绑定控件生成的话虽如此，我认为作为最后的努力，我至少可以用DIV包装每个td1的内容，溢出可以处理一些事情，但甚至可以替换。<td id="td1">
Extra_long_filler
浏览 7提问于2009-01-26得票数 21
回答已采纳
2回答
仅使用css宽度填充60%的星号
html、css、unicode
当我尝试style=width:60% to .rating类时，金色应该只填满3颗星，其余的星应该是空白的，但它不起作用。请帮帮我，我的错误是什么？我的html代码： <div class="rating" style="width:60%">
<span>☆</span>#9734;<&
浏览 0提问于2015-11-23得票数 10
回答已采纳
3回答
水平滚动条不会消失吗？
css
弹出的水平滚动条有问题。我的页面是这样设置的：<head></head></article>
</html>article { margin:0px auto;}
我也在使用。麻烦的是，100
浏览 4提问于2012-01-15得票数 0
回答已采纳
3回答
具有100%高度和滚动条的IE6“框架”布局
css、height、internet-explorer-6
我想要实现一个简单的“框架”布局与固定的标题，固定的左导航区域，和一个主要的内容区域，填补100%的其余的视区与滚动条，如果需要。我最好的尝试是在下面--但是当我向主div添加足够的内容以强制滚动时，我看到滚动条延伸到了视口底部的下方。
我做错了什么？或者IE6做错了什么，我如何修复它？到目前为止，我一直在使用DOCTYPEHTML4.0过渡性的
浏览 1提问于2010-05-18得票数 6
回答已采纳
4回答
如何使正文内容仅水平溢出？
html、css、scroll、overflow
我试图让页面水平溢出，而不是垂直溢出，所以如果内容不适合页面窗口，我希望它只能通过overflow-x栏进行滚动，从而保持页面的固定高度。这个想法是让它水平“增长”--向右。理想情况下，使用CSS可以做到这一点吗？谢谢，保重，真的，Piotr。
浏览 6提问于2011-08-01得票数 4
1回答
HTML/CSS -将多个DIV元素并排定位，每个div都是浏览器的100%宽/高。
css、html、fullscreen、document-body
我有几个需要并排放置的DIV元素(中间没有边距)，每个div必须有100%的浏览器宽度和100%的浏览器的最小高度。
就像我说的，我相信这有一个快速而简单的诀窍，我只是在我的研究中找不到什么。
浏览 5提问于2014-01-17得票数 0
2回答
如何填充img与动态填充内部div永久大小？
html、css
我有div width:200px; height:200px，这个分区应该是永久大小，但它不是。我想把里面的div img，我可以发挥与填充10px或20px的每一面取决于用户的配置。img的大小大于200px，确实如此。我的问题是，当我玩填充时，div不会永久地调整大小，它会随着填充的变化而变化。我想用div的大小来分隔填充。谢谢你的帮助。<!backgro
浏览 0提问于2012-07-01得票数 2
回答已采纳
2回答
导致水平滚动条的宽表
asp.net、css、ajax、xhtml
我在两个嵌套的div中有一个表。其中一列包含一个图像，该图像的宽度使页面的总宽度比显示的宽度更宽，并显示水平滚动条。此单元格来自asp.net ajax弹出窗口(鼠标悬停时)，并通过javascript隐藏，因此不需要滚动条。
有没有办法通过css/xhtml使滚动条不显示？我确信是表格单元格的宽度导致了这个问题，因为当我删除它时，滚动条就消失了。image元素嵌套在<e
浏览 0提问于2009-08-09得票数 0
回答已采纳
1回答
调整大小时，同级div跳到新行
jquery、html、css
但我试图实现的是，当我调整一行中任何一列的大小时，其余的列应该根据行的总剩余宽度来调整大小。假设如果行的总宽度是100%，如果我将第一列的大小调整了60%，那么剩下的三列应该根据剩余的40%来调整大小。与在我的html中一样，它不会调整大小，其余的列将向下移动。
这是我的代码。<div
浏览 0提问于2014-10-10得票数 0
4回答
在一行中有两个div的CSS IE问题
css、internet-explorer
正如你可以猜到的，我希望下面两个div保持在一行上，而不会在浏览器调整大小时中断。<div style="float: left; margin-right: 10px; ">
但是像往常一样，当我用IE9测试页面时，右边的<em
浏览 1提问于2013-03-04得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
