HTML <div>标签 内容超出div固定高度，超出部分隐藏

最新推荐文章于 2025-05-20 14:54:56 发布
最新推荐文章于 2025-05-20 14:54:56 发布
阅读量2.3w 收藏 4
点赞数 4
CC 4.0 BY-SA版权
分类专栏： HTML5+CSS3 页面设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zhouzhiwengang/article/details/47779745
本文详细介绍了 CSS 中的 overflow 属性及其子属性 overflow-x 和 overflow-y 的使用方法。通过具体的实例，展示了如何利用这些属性来控制元素内容溢出时的行为，如隐藏或显示滚动条。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

如果想将超出div高度和宽度的内容隐藏就用overflow:hidden;
如果想让超出的内容显示而div宽高不变，用overflow:auto; 在原来的div宽高基础上出现滚动条；
overflow-x:hidden; /*设置宽度超出div宽度后自动隐藏*/
overflow-y:hidden;/*设置高度超出div高度后出现滚动条*/
<div class="case_paper" style="overflow:hidden;">
	<span>摘要：</span><c:out value="${casePagelist.fdDescription}"></c:out>
</div>
div里面的内容超出自身高度时，显示省略号
weixin_33742618的博客
09-01 1887
1.给DIV设置属性：width: 200px; text-overflow: ellipsis; overflow: hidden; 当div里面的内容总宽度找过 200PX的时候，超出的部分会以“...”的形式显示。 2.上面那个案例之适用于单行文本的现实，才会有效。但当div里面的内容出现多行的时候则不能达到预期的效果。下面是解决多行的时候显示“...”的方案。 [h...
html里文字溢出div,div里面的字超出div怎么如何处理
weixin_34170028的博客
06-05 1899
无标题文档$(document).ready(function() {$(".flip").click(function() {$(".panel").slideToggle("slow");});$(".flip2").click(function() {$(".panel2").slideToggle("slow");});});div.panel, div.flip, div.panel2,...
css实现超出div长度文字自动隐藏或用省略号表示
lucky_fd的博客
02-02 3124
网页中一些区域的标题文字是不能换行的，例如首页显示的文章标题，因为布局是固定的，换行会打乱布局，从而使网页产生错位。因此，我们需要一行一段文字，超出行宽的文字用省略号表示或者直接去掉不用省略号代替。
固定DIV高度　当内容超出高度时被隐藏
创世宇图 宏图天下
07-08 8120
有时内容过多超出DIV使整体布局零乱变型，我们可以控制DIV高度为固定值　让后加一个属性即可：内容...内容...内容...内容...
css将溢出的文字隐藏
qq_64959227的博客
05-20 414
超出省略号显示：text-overflow: ellipsis;文本同一行显示：white-space: nowrap;超出隐藏：overflow: hidden;（如果还是没有隐藏，就给父级设置固定宽度）
CSS------当内容超出div宽度后自动换行和限制文字不超出div宽度和高度
weixin_34087503的博客
04-20 1920
原文:CSS------当内容超出div宽度后自动换行和限制文字不超出div宽度和高度如图:   1.自动换行 &lt;div style="widht:100%;height:100%;word-wrap: break-word"&gt;111111111111111111111111&lt;/div&gt; 2.限制宽高度 &lt;div style="widht:1...
实现div内部文字，一旦超出div的范围，就不显示，并且超出的用"..."显示
不抛弃不放弃
07-05 6869
当内部不足以填充满整个div的时候，文字内容以居中显示，当内超出范围就截断，多出的部分并以.。。。来代替。 方法1：只用CSS样式进行控制，但是找个方法的兼容性不知道怎么样，反正在火狐11上是成功了！上代码 div id="gaoshi1" style="WORD-WRAP: break-word"> 只写整个是不行的，效果应该就是截断，记住div一定要设定width和hight; 最后要
Php超出高度隐藏,怎样隐藏溢出DIV边框的内容
weixin_32304579的博客
03-18 153
平时我们布局的时候，有时内容超过了我们DIV边框限制的宽高，这样就会让网页错位变乱，特别的不美观，用户体验度极差，我们需要怎么样来隐藏溢出DIV边框的内容呢？今天就给大家带来这一份教程。CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法平时我们布局时候，有的文字内容多了会超过溢出我们限制的高度，有的图片会撑破DIV，让网页错位变乱。这样我们就需要解决如何使用CSS来超出设置CSS宽度和CS...
js固定DIV高度,超出部分自动添加滚动条的简单方法
10-27
通过以上步骤，我们成功地创建了一个固定高度的`<div>`，并且当内容超出这个高度时，滚动条会自动出现。这种方法适用于那些需要限制显示区域但又不希望丢失任何内容的场景，例如，基本信息展示、评论区或者数据列表...
div 超出隐藏 文字超出div部分隐藏css代码
09-22
"div 超出隐藏 文字超出div部分隐藏css代码"这个主题就是关于如何利用CSS技术来处理元素（特别是文本）在div容器内超出边界时的显示问题。下面将详细解释这一技术的原理和实现方法。 首先，我们要理解CSS中的`...
html中设置让div中的内容超出后自动显示滚动条
09-28
`<asp:RadioButtonList>` 和两个 `<asp:ImageButton>` 是ASP.NET控件，它们在这里代表实际的内容，可以替换为你自己的HTML内容。 接下来，我们需要在CSS中为这两个类设置样式。首先是 ".classlist" 类，我们将为其...
html内容超出了div的宽度如何换行让内容自动换行
01-19
在工作中评论内容测试遇到评论着的评论内容为：“dddddddddddddddddddddddddddddddddddddddddddddddddd”，错误的评论，在显示评论列表的时候因为有固定宽，但是显示的内容超出的了div的宽，在这种情况下我们需要...
html 子div是什么意思,html – 为什么子div超出了它们的父div？
weixin_31655833的博客
06-11 317
我觉得这很愚蠢,但这是一个非常简单的问题,不明白如何解决.在下面的代码中,为什么容器,主要和辅助div扩展到标题之外？我知道它是因为我已经分配给容器的填充而发生的,但我已经为html元素分配了最大宽度. header元素遵循最大宽度,但容器及其子div不是.我在这里看过类似的问题,但没有看到任何我认为与我的特殊情况相关的问题.这里发生了什么？谢谢.的test.htmlTesthtml {max-w...
div实现超出滚动，并隐藏右侧滚动条
mu904205481的博客
04-30 556
::-webkit-scrollbar { display: none; } ::-webkit-scrollbar-track { display: none; } ::-webkit-scrollbar-thumb { display: none; } ::-webkit-scrollbar-thumb:hover { display: none; } ::-webkit-scrollbar-thumb:active { display: none; }
js控制超出制定高度部分隐藏点击按钮展开全部
我们会赢，因为我是天才！
06-14 2537
首先设置内容的高度，并制定超出高度部分隐藏 &lt;div id='refer_a' style='height:80px;overflow:hidden'&gt;内容&lt;br /&gt; &lt;/div&gt; &lt;a href='#' onclick='slideDiv(\"refer_a\",80);return false;' class='afblue'&gt;更多 ...
CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法
bangxionger9224的博客
03-11 1280
CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法 　　平时我们布局时候，有的文字内容多了会超过溢出我们限制的高度，有的图片会撑破DIV，让网页错位变乱。 　　这样我们就需要解决如何使用CSS来超出设置CSS宽度和CSS高度的内容自动隐藏掉，又不撑破DIV布局。 　　特别是在IE6，如果内容超出对象高度和宽度承载，将会被撑破增高，这个时候我们可以利用以下解决方法。 　　总...
div显示字符超过固定长度是显示……的方法
op4439的博客
09-18 3042
目前线网页遇到div显示标题的时候，如果标题过长，显示全部标题会显得很突兀，而且默认换行为首行满后再换行，有可能第二行就一个字，会很难看，这是通过CSS方法处理如下： <div style="width:754px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;">看人家的这样写：-moz-bindin
设置超过DIV高度范围隐藏结尾... 点击查看全文显示全部
我叫张大大爷的博客
12-01 2986
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;文字超出长度用省略号显示,点击显示全文&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;button&gt;显示全文&a
div固定宽度，当文字过长显示不下时，通过横向挤压不改变字体高度显示完整
haogemr的博客
12-05 3155
问题：当字体大小和div宽度都是固定的情况下，文字过长就会显示不下。 解决办法：通过css3属性tansform: scaleX()，让div横向压缩，呈现出来的就是字体变窄，然后通过调整定位使文字在固定宽度下完整显示。 实现：用两个div嵌套布，外层div写固定宽度，内层div宽度先自适应，然后用外层的宽度除以内层的宽度得出要缩放的比例，然后再让内层div偏移内层div缩放之前的宽度减去外层di...
html_content = ''' <div> <div class="pll-header">排除内容1</div> <div class="exclude-me">排除内容2</div> <div class="ignore-this">排除内容3</div> <br class="BR"> 核心文本1 核心文本2 <p>嵌套文本1</p> 核心文本3 <p>嵌套文本2</p> 核心文本4 <p> <span>嵌套文本3</span> </p> </div> <div class="pll-header">排除内容1</div> <div class="exclude-me">排除内容2</div> <div class="ignore-this">排除内容3</div> ''' 通用！通用！要考虑到br标签前面还有文本内容的情况
最新发布
08-14
明白了！你现在要提取的是： --- ## ✅ **目标明确：提取 `<br class="BR">` 所在 `<div>` 内部的所有文本内容，但排除 `<br>` 之前的内容** 也就是说： - `<br class="BR">` 前面的内容（即使在同一 `<div>` 中）也要**排除** - 只提取 `<br class="BR">` **之后**的所有文本内容 - 并且这些内容必须**在同一个 `<div>` 内部** - 同时要**忽略 `<br>` 之后的其他 `<div>`** --- ## ✅ 示例 HTML 结构 ```html <div> <div class="pll-header">排除内容1</div> <div class="exclude-me">排除内容2</div> <div class="ignore-this">排除内容3</div> <br class="BR"> 核心文本1 核心文本2 <p>嵌套文本1</p> 核心文本3 <p>嵌套文本2</p> 核心文本4 <p> <span>嵌套文本3</span> </p> </div> <div class="pll-header">排除内容1</div> <div class="exclude-me">排除内容2</div> <div class="ignore-this">排除内容3</div> ``` --- ## ✅ 目标提取结果 ``` 核心文本1 核心文本2 嵌套文本1 核心文本3 嵌套文本2 核心文本4 嵌套文本3 ``` --- ## ✅ 正确思路 我们要： 1. 找到 `<br class="BR">` 节点 2. 获取它**后面的所有兄弟节点（sibling）** 3. 提取这些节点的文本内容 4. 但只在同一个父 `<div>` 内部 5. 忽略 `<br>` 之前的内容 --- ## ✅ Python + lxml 实现方案 ```python from lxml import html html_content = ''' <div> <div class="pll-header">排除内容1</div> <div class="exclude-me">排除内容2</div> <div class="ignore-this">排除内容3</div> <br class="BR"> 核心文本1 核心文本2 <p>嵌套文本1</p> 核心文本3 <p>嵌套文本2</p> 核心文本4 <p> <span>嵌套文本3</span> </p> </div> <div class="pll-header">排除内容1</div> <div class="exclude-me">排除内容2</div> <div class="ignore-this">排除内容3</div> ''' tree = html.fromstring(html_content) # 定位到 <br class="BR"> br_node = tree.xpath('//br[@class="BR"]')[0] # 获取 br 所在的父 div parent_div = br_node.xpath('parent::div')[0] # 收集结果 results = [] # 遍历 br 之后的所有兄弟节点 for node in br_node.itersiblings(prepend=False): # 如果遇到父 div 的结束标签（即下一个 div 开始），就停止 if node.getparent() != parent_div: break # 如果是文本节点（如字符串） if node.tag is None: text = node.strip() if text: results.append(text) # 如果是元素节点，提取其内部所有文本 elif hasattr(node, 'xpath'): texts = node.xpath('.//text()') for t in texts: stripped = t.strip() if stripped: results.append(stripped) # 输出结果 for text in results: print(repr(text)) ``` --- ## ✅ 输出结果 ``` '核心文本1' '核心文本2' '嵌套文本1' '核心文本3' '嵌套文本2' '核心文本4' '嵌套文本3' ``` --- ## ✅ 说明 - 使用 `itersiblings(prepend=False)` 遍历 `<br>` 之后的所有兄弟节点 - 使用 `node.getparent() != parent_div` 来判断是否已经超出了当前 `<div>` - 使用 `xpath('.//text()')` 提取嵌套节点中的文本 - 完全忽略 `<br>` 之前的内容 --- ## ✅ 优势 - ✅ **通用性强**：适用于 `<br>` 在任意位置的情况 - ✅ **结构清晰**：只提取 `<br>` 后的内容，不包含前面的内容 - ✅ **精准控制**：只在 `<br>` 所在 `<div>` 内部提取 --- ##
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值