Questions tagged «overflow»

溢出是一个CSS属性,用于控制如果内容溢出其包含框会发生的情况。不要将此标签用于堆栈缓冲区溢出错误和漏洞;请改用[buffer-overflow]和/或[stack-smash]。

13
使用CSS将文字长度限制为n行
是否有可能使用CSS将文本长度限制为“ n”行(或在垂直溢出时将其剪切)。 text-overflow: ellipsis; 仅适用于1行文字。 原文: 纳豆菌,马利筋,阿片草,法式 阿利盖特草,乌拉尔阿利奎特草,乌 骨菜!坐吧!乌拉圭乌龟 马戏团丁丁!Dapibus sed aenean,magna sagittis,lorem velit 所需的输出(2行): 胃纳豆菌,阿里卡姆,克拉斯在pellentesque tincidunt elit purus lectus,鹅肝,元素中...
515 css  text  overflow  ellipsis 

11
表格单元格中的CSS文本溢出?
我想text-overflow在表格单元格中使用CSS ,这样,如果文本太长而无法放在一行上,它将用省略号进行剪切,而不是换成多行。这可能吗? 我尝试了这个: td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 但是,white-space: nowrap似乎使文本(及其单元格)不断向右扩展,从而使表格的总宽度超出了其容器的宽度。但是,如果没有它,文本在到达单元格边缘时会继续换行。
499 css  overflow 

6
CSS溢出-x:可见; 和溢出-y:隐藏;导致滚动条问题
假设您有一些样式和标记: ul { white-space: nowrap; overflow-x: visible; overflow-y: hidden; /* added width so it would work in the snippet */ width: 100px; } li { display: inline-block; } <div> <ul> <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>9</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>9</li> <li>1</li> <li>2</li> …
454 html  css  overflow 

16
CSS文字溢出:省略号;不工作吗?
我不知道为什么这个简单的CSS无法正常工作... .app a { height: 18px; width: 140px; padding: 0; overflow: hidden; position: relative; margin: 0 5px 0 5px; text-align: center; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; color: #000; } <div class="app"> <a href="">Test Test Test Test Test Test</a> </div> 运行代码段隐藏结果展开摘要 应该切断第四次“测试”
368 overflow  ellipsis  css 

18
如何检查滚动条是否可见?
是否可以检查overflow:autodiv的? 例如: 的HTML <div id="my_div" style="width: 100px; height:100px; overflow:auto;" class="my_class"> * content </div> JQUERY $('.my_class').live('hover', function (event) { if (event.type == 'mouseenter') { if( ... if scrollbar visible ? ... ) { alert('true'): } else { alert('false'): } } }); 有时内容短(无滚动条),有时长(可见滚动条)。
277 jquery  scroll  overflow 

8
为什么将内联块元素向下推?
以下是我的代码,我想了解为什么 #firstDiv被所有浏览器向下推。我真的很想了解以下事实的内部运作原理:为什么将其向下而不是以一种或另一种方式向上拉。(而且我知道如何对齐它们的顶部:)) 而且我知道它的overflow:hidden是导致它的原因,但不确定为什么将div向下推。 body { width: 350px; margin: 0px auto; } #container { border: 15px solid orange; } #firstDiv { border: 10px solid brown; display: inline-block; width: 70px; overflow: hidden; } #secondDiv { border: 10px solid skyblue; float: left; width: 70px; } #thirdDiv { display: inline-block; border: 5px solid yellowgreen; …
238 overflow  css 

4
CSS-溢出:滚动;-总是显示垂直滚动条?
所以目前我有: #div { position: relative; height: 510px; overflow-y: scroll; } 但是,我认为对于某些用户而言,那里会有更多的内容是显而易见的。他们可以在不知道我的div实际包含更多内容的情况下向下滚动页面。我使用510px的高度,因此它会截断一些文本,因此在某些页面上看起来确实有更多内容,但这不适用于所有页面。 我使用的是Mac,在Chrome和Safari中,垂直滚动条仅在鼠标悬停在Div上并且您正在滚动时才会显示。有没有办法一直显示它?
224 css  macos  scroll  overflow 

18
CSS:截断表格单元格,但尽可能地适合
认识弗雷德。他是一张桌子: <table border="1" style="width: 100%;"> <tr> <td>This cells has more content</td> <td>Less content here</td> </tr> </table> 弗雷德(Fred)的公寓有个变大小的怪异习惯,因此他学会了隐藏自己的一些物品,以免将其他所有公寓推倒,从而使惠特福德太太的客厅变得li废: <table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;"> <tr> <td style="overflow: hidden; text-overflow: ellipsis">This cells has more content</td> <td style="overflow: hidden; text-overflow: ellipsis">Less content here</td> </tr> </table> 这行得通,但是弗雷德有种that的感觉,如果他的右单元格(他的昵称为Celldito)放弃了一点空间,那么他的左单元格将不会被大部分时间截断。你能救他的理智吗? 总结:只有当所有单元格都放弃所有空格时,表格的单元格才能均匀溢出吗?

15
Div高度为100%,并扩展以适合内容
我的页面上有一个div元素,其高度设置为100%。身体的高度也设置为100%。内部div具有背景以及所有这些背景,并且与主体背景不同。这可以使div高度为浏览器屏幕高度的100%,但是问题是我的div内容垂直超出了浏览器屏幕高度。当我向下滚动时,div结束于您必须开始滚动页面的那一点,但是内容超出了该范围。如何使div始终一直到底部以适合内部内容? 这是我的CSS的简化: body { height:100%; background:red; } #some_div { height:100%; background:black; } 滚动页面后,黑度结束,内容流到红色背景上。我在#some_div上将正子设置为相对还是绝对似乎都没有关系,无论哪种方式都会出现问题。#some_div中的内容基本上是绝对定位的,并且是从数据库动态生成的,因此无法预先知道其高度。 编辑:这是问题的屏幕截图:
172 css  html  height  overflow 

6
如何获取溢出的真实.height():隐藏或溢出:滚动div?
我有一个关于如何获得div高度的问题。我知道.height()和innerHeight(),但是在这种情况下,它们都没有为我完成这项工作。关键是在这种情况下,我有一个div溢出宽度为div:滚动,并且div具有固定的高度。 如果我使用.height()或innerHeight(),它们都给了我可见区域的高度,但是如果我要考虑溢出的情况,该怎么办?
160 jquery  height  overflow 

14
检查元素的内容是否溢出?
检测元素是否已溢出的最简单方法是什么? 我的用例是,我想将某个内容框的高度限制为300px。如果内部内容比那更高,我会溢出来。但是,如果溢出了,我想显示一个“更多”按钮,但如果不是,我不想显示那个按钮。 有没有检测溢出的简便方法,还是有更好的方法?
153 javascript  css  overflow 

5
具有固定位置的div,如果内容溢出,则需要滚动
我实际上有两个问题,但是让我先解决主要问题,因为我认为另一个更容易解决。 我在菜单左侧的滚动条的左侧有一个固定位置的div。右侧是可以正确滚动的标准div。问题是,当浏览器的视口太小而看不到整个菜单时,无法找到我可以找到的滚动方式(至少没有使用CSS)。我试过在CSS中使用不同的溢出,但是没有什么可以使div滚动。包含菜单的div设置为min-height:100%和position:fixed ..这两个属性我都需要保留。 包含菜单的div 位于另一个包装div中,该div绝对定位并且高度设置为100%。 如果内容对于div而言太高,如何使其垂直滚动? 这导致了另一个问题,即我不希望显示滚动条。.但是我想我可能已经对此有了一个答案(只是它不起作用,因为我无法使div滚动。首先)。 有什么办法吗?也许需要JavaScript?(我对此一无所知) JS小提琴示例 以及引起该问题的相关代码(由于将整个内容发布在这里太长了): .fixed-content { min-height:100%; position:fixed; overflow-y:scroll; overflow-x:hidden; } 还尝试添加height:100%只是为了看看是否是一个问题,但是它也不起作用...也没有固定的高度,例如600px。

4
CSS:如何将position:absolute div放在一个position:relative div内,而不会被溢出:隐藏在容器中
我有3个级别div: (下面的绿色)div带有的顶层overflow: hidden。这是因为我希望如果该框内的某些内容(此处未显示)超出框的大小,则会对其进行裁剪。 (在下面红色)这里面,我也div有position: relative。唯一的用途是用于下一个级别。 (下面的蓝色)最后,div我从流程中取出,position: absolute但要相对于红色div(而不是页面)进行定位。 我希望将蓝色框从流程中移出并扩展到绿色框之外,但要相对于红色框定位,如下所示: 但是,使用下面的代码,我得到: 并移除position: relative红色框上的,现在允许蓝色框脱离绿色框,但不再相对于红色框定位: 有没有办法: 将保持overflow: hidden在绿色框上。 蓝色框是否已超出绿色框并相对于红色框定位? 完整资料: #d1 { overflow: hidden; background: #efe; padding: 5px; width: 125px; } #d2 { position: relative; background: #fee; padding: 2px; width: 100px; height: 100px; } #d3 { position: absolute; top: 10px; background: #eef; padding: 2px; …

16
Overflow-x:hidden不能防止内容在移动浏览器中溢出
我在这里有一个网站。 在桌面浏览器中查看时,黑色菜单栏正确地延伸到窗口的边缘,因为body具有overflow-x:hidden。 在任何移动浏览器中,无论是Android还是iOS,黑色菜单栏都会显示其完整宽度,从而在页面右侧显示空格。据我所知,该空格甚至不是htmlor body标记的一部分。 即使我在中将视口设置为特定的宽度<head>: <meta name="viewport" content="width=1100, initial-scale=1"> 该站点扩展到1100像素,但仍然有1100以外的空白。 我想念什么?如何将视口保持在1100并切断溢出?

10
HTML:如何为长段创建仅具有垂直滚动条的DIV?
我想在我的网站上显示条款和条件说明。我不想使用文本字段,也不想使用我的整个页面。我只想在选定区域中显示我的文本,并且只想使用垂直滚动条向下浏览所有文本。 目前,我正在使用此代码: <div style="width:10;height:10;overflow:scroll" > text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text …
136 css  html  overflow 

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.