html中 overflow-x 不起作用

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html中 overflow-x 不起作用相关的知识，希望对你有一定的参考价值。

<textarea style="width:200px;height:200px;overflow-x:scroll;">sss</textarea>

如上，我在多行文本框中，憋下一口气按住键盘S键不放，当s填满一行的时候，就跳到第二行去了，不是期望中的出现滚动条，然后滚动条不断的缩短....

我想到达效果就是像记事本选用了不自动换行的功能

overflow:scroll; /*任何时候都强制显示滚动条*/
overflow:auto; /*需要的时候会出现滚动条*/
overflow-x:auto; /*控制X方向的滚动条*/
overflow-y:auto; /*控制Y方向的滚动条*/
示例:
<html>
<HEAD>
<TITLE>测试表格内的滚动条</TITLE>
</HEAD>
<BODY>
<table>
<tr>
<td>表格内的滚动条:</td>
<td>
<div id="wins"
style="position:absolute;height:200;width:200;overflow:auto;background:#EEEEEE;">
<p>pppppppppppppppppppppppppppppppppppppppppppppppppp </p>
<p>pppppppppppppppppppppppppppppppppppppppppppppppppp </p>
<p>ppppppppppppppppppppppppp </p>
<p>ppppppppppppppppppppppppp </p>
<p>ppppppppppppppppppppppppp </p>
<p>ppppppppppppppppppppppppp </p>
<p>ppppppppppppppppppppppppp </p>
<p>ppppppppppppppppppppppppp </p>
<p>ppppppppppppppppppppppppp </p>
<p>ppppppppppppppppppppppppp </p>
<p>ppppppppppppppppppppppppp </p>
<p>ppppppppppppppppppppppppp </p>
</div>
</td>
</tr>
<tr>
<td colspan="2" align="right">
<span onmouseover=\'scrollb=setInterval("wins.scrollLeft-=10",100)\'
onmouseout=clearInterval(scrollb)>向左</span>
<span onmouseover=\'scrollb=setInterval("wins.scrollTop-=10",100)\'
onmouseout=clearInterval(scrollb)>向上</span>
<span onmouseover=\'scrollb=setInterval("wins.scrollLeft+=10",100)\'
onmouseout=clearInterval(scrollb)>向右</span>
<span onmouseover=\'scrollb=setInterval("wins.scrollTop+=10",100)\'
onmouseout=clearInterval(scrollb)>向下</span>
</td>
</tr>
</table>
</BODY>
</HTML> 参考技术A <textarea style="width:200px;height:200px;overflow-x:auto;white-space:nowrap;">如上，我在多行文本框中，憋下一口气按住键盘S键不放，当s填满一行的时候，就跳到第二行去了，不是期望中的出现滚动条，然后滚动条不断的缩短....
我想到达效果就是像记事本选用了不自动换行的功能</textarea>

加white-space:nowrap就可以了

本回答被提问者采纳 参考技术B <!DOCTYPE html>
<html>
<body>

<form action="/demo/demo_form.asp">
<textarea rows="2" cols="20" name="usrtxt" wrap="hard">
At W3School you will find free Web-building tutorials.
</textarea>
<input type="submit">
</form>

</body>
</html>
你按照上面的试一下 ，把rows,和cols的值修改一下就可以。

DIV + CSS overflow: 不支持,怎么办.,在IE中一切正常,到火狐与Chrome 就 不起作用了.怎么办?

overflow-x:hidden; 还有 overflow-y:scroll;
<STYLE type=text/css>
TABLE .banner
WIDTH: 140px; TEXT-ALIGN: center; PADDING-left: 5px;

BODY TABLE
WIDTH: 100%;overflow-x:hidden;BORDER-COLLAPSE: collapse; HEIGHT: 100%; border-spacing: 0

</STYLE>
<TABLE>
<TBODY>
<TR>
<TD > <div style="width:100%;height:100%;overflow-x:hidden;overflow-y:scroll;word-break:break-all; font-size:14px;color:#333333; line-height:10px; padding-left:10px">
这里是聊天发送的内容<br><br>
这里是聊天发送的内容<br><br>
这里是聊天发送的内容<br><br>
这里是聊天发送的内容<br><br>
这里是聊天发送的内容<br><br>
这里是聊天发送的内容<br><br>
这里是聊天发送的内容<br><br>
这里是聊天发送的内容<br><br>
这里是聊天发送的内容<br><br>
这里是聊天发送的内容<br><br>
</div>
</TD></TD></TR></TBODY></TABLE>

两个内容框,内容多时下拉条会跟着变100%, 放大窗口下拉条显示灰色,缩小到文字高度时,下拉条出现 ,IE对有效,火狐无效. 是不是不支持BODY TABLE ??? 浏览器放大缩小时,火狐根不就不变化,反而右侧又多了个下拉条

overflow-x:hidden; overflow-y:scroll;
以上两属性的用法是符合CSS3.0标准的，它在以下版本的浏览器中都是支持的：
(√)IE6 (√)Firefox 3.0 (√)Chrome 1.0.x (√)Opera 9.63 (√)Safari 3.1
(√)IE7 (√)Firefox 3.5 (√)Chrome 2.0.x (√)Safari 4
(√)IE8

因此问题可能不是出在这里。能把代码详细列出来么？追问

ID 对这个有效,但 火狐对这个CSS定义无效. 好像, BODY TABLE

追答

IE对Table的理解，与其他标准浏览器（火狐、Chrome等）是存在很大差异的，你既然用了DIV + CSS，为什么还要用Table呢？你把外层的那个整个去掉，那么在三种浏览器中的效果就相差不大了。
剩下的差别主要是由padding造成的，标准浏览器在解析padding时，会把它的长度添加到整体的width中去，比如padding-left:10px，那么width也会增加10px，所以尽量不要用padding，而是通过所包含的内层的margin来定边距。

追问

全变成DIV后, IE不行啊,IE就不随着变化了,能帮我看一下?球球有吗?

 参考技术A 在显示内容的DIV上面添一个TABLE 并让其绝对定位,然后,在TABLE里, 然后在你的前面的DIV里, 添加你的要输出的内容即可.你可以试下.本回答被提问者采纳 参考技术B 　　您好！很高兴为您答疑！

　　在显示内容的DIV上面添一个TABLE 并让其绝对定位,然后,在TABLE里, 然后在你的前面的DIV里, 添加你的要输出的内容即可。
　　您可以在火狐社区了解更多内容。希望我的回答对您有所帮助，如有疑问，欢迎继续在本平台咨询。

以上是关于html中 overflow-x 不起作用的主要内容，如果未能解决你的问题，请参考以下文章

为啥overflow-x:clip 在移动浏览器上不起作用

创建带有溢出的滚动条不起作用？

DIV + CSS overflow: 不支持,怎么办.,在IE中一切正常,到火狐与Chrome 就 不起作用了.怎么办?

使用鼠标的 CSS 滚动捕捉在 Safari 中不起作用，但在 Firefox 和 Chrome 中有效

jsp 中onclick不起作用

HTML 5 地理位置不起作用 [关闭]