标签: overflow

我的页面上有一个包含文本的固定宽度div.当我输入一长串字母时,它会溢出.我不想隐藏溢出我想在新行上显示溢出,见下文:

<div id="textbox" style="width:400px; height:200px;">
dfssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssfddddddddddddddddddddddsdffffffffffffffffsdffffffffffffffffdfssssssssssssdf
</div>

反正有没有禁用溢出并将溢出的文本放在一个新行??? Twitter做了类似的事情,但我无法用CSS来解决它可能他们正在使用Javascript.

任何人都可以帮忙吗？

在CSS中,overflow:hidden在父容器上设置,以允许它随浮动子项的高度扩展.

但与margin: auto... 结合使用时还有另一个有趣的功能

如果PREVIOUS兄弟是一个浮动元素,它实际上会与它并列.也就是说,如果兄弟姐妹float:left那么容器float:none overflow:hidden会出现在兄弟姐妹的右边,没有换行 - 就好像它正在漂浮在正常流程中一样.如果之前的兄弟姐妹是float:right容器将出现在兄弟姐妹的左边.调整此容器的大小将准确显示它位于浮动元素之间的中心.如果你有两个以前的兄弟姐妹,一个说float:left对方float:right,容器将出现在中心插图中的两项.

所以这就是问题 ......

如何在不屏蔽孩子的情况下保持这种类型的布局？

谷歌搜索遍布网络给了我如何clear:both和扩展容器的方法...但我找不到任何替代解决方案来维持左/右前一个孩子居中.如果您制作容器,overflow:visible则容器突然忽略浮动元素的布局流程,并且在浮动元素的顶部显示为分层.

所以问题:

我必须有容器overflow:hidden来保存布局......

我该怎样才能让孩子们不被蒙面？我需要让孩子相对于容器外的父母绝对定位.

要么

我如何overflow:visible才能绝对将一个孩子相对于容器外的父母定位... YET保留兄弟浮动状布局流？

我有以下标记:

<div class="FixedHeightContainer">
  <h2>Title</h2>
  <div class="Content">
    ..blah blah blah...
  </div>
</div>

CSS看起来像这样:

.FixedHeightContainer
{
  float:right;
  height: 250px;
  width:250px;  
}
.Content
{
  ???
}

由于其含量,高度div.Content通常大于由其提供的空间div.FixedHeightContainer.此刻,div.Content快乐地延伸到底部div.FixedHeightContainer- 根本不是我想要的.

如何指定div.Content得到滚动条(只有最好垂直,但我不挑食)时,其高度过大,以适应？

overflow:autooverflow:scroll出于某种奇怪的原因,它什么都不做.

我发现方法的java.lang.Integer实现compareTo如下:

public int compareTo(Integer anotherInteger) {
    int thisVal = this.value;
    int anotherVal = anotherInteger.value;
    return (thisVal<anotherVal ? -1 : (thisVal==anotherVal ? 0 : 1));
}

问题是为什么使用比较而不是减法:

return thisVal - anotherVal;

我用这个代码:

while ( scanf("%s", buf) == 1 ){

什么是防止可能的缓冲区溢出的最佳方法,以便它可以传递随机长度的字符串？

我知道我可以通过调用例如限制输入字符串:

while ( scanf("%20s", buf) == 1 ){

但我更愿意能够处理用户输入的任何内容.或者这不能使用scanf安全地完成,我应该使用fgets？

按照我之前的问题(添加一个滚动条到<textarea>)关于如何总是看到一个滚动条<textarea>,我现在想知道如何设置它,以便<textarea>即使文本溢出也没有滚动条.要向下滚动,可以使用箭头键或鼠标在文本中导航.

我怎样才能做到这一点？

当响应和滚动活动时,表格内的下拉按钮出现问题,因为overflow: auto;属性导致下拉列表不可见.我如何修复它以便在折叠时显示按钮的下拉选项？我可以使用一些jQuery,但在我左右滚动问题后,我决定找到另一个解决方案.我附上照片以便更好地理解.

这是一个小小的小提琴:

我设计了一个100%宽度100%高度布局与css3 flexbox,它适用于IE11(如果IE11仿真正确,可能在IE10上).

但Firefox(35.0.1),overflow-y无效.正如你在这个codepen中看到的那样:http://codepen.io/anon/pen/NPYVga

firefox没有正确渲染溢出.它显示了一个滚动条

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}
.level-0-container {
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column; 
}
.level-0-row1 {
  border: 1px solid black;
  box-sizing: border-box;
}
.level-0-row2 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border: 1px solid black;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row; …

我正在写一个页面,我需要一个html表来维持一个设置的大小.我需要表格顶部的标题始终保持在那里,但无论表格中添加了多少行,我还需要滚动表格的主体.

我希望它看起来像这个网址中的方法2:http://www.cssplay.co.uk/menu/tablescroll.html

我试过这样做但没有滚动条出现:

    <table border=1 id="qandatbl" align="center">
    <tr>
    <th class="col1">Question No</th>
    <th class="col2">Option Type</th>
    <th class="col1">Duration</th>
    </tr>

   <tbody>
    <tr>
    <td class='qid'></td>
    <td class="options"></td>
    <td class="duration"></td>
    </tr>
    </tbody>
</table>

CSS:

tbody { 
    height:80em;  
    overflow:scroll;
                }

我的布局有一个容器flex-container和一个孩子.

HTML:

<div class="flex-container">
  <div>text</div>
</div>

容器和孩子的身高不明.目标是:

• 如果孩子的高度低于容器,则它看起来水平和垂直居中.
• 如果孩子的高度高于容器,它会调整到顶部和底部,我们可以滚动.

方案:

使用flexbox对元素进行居中的最快方法如下:

.flex-container
{
  display: flex;
  align-items: center; /* vertical */
  justify-content: center; /* horizontal */

  width: 100%;
  height: 300px; /* for example purposes */
  overflow-y: scroll;
  background: #2a4;
}

.flex-container > div
{
  background: #E77E23;
  width: 400px;
}

<div class="flex-container">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi …