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>
温馨提示:内容为网友见解,仅供参考
第1个回答  2014-08-19
<textarea style="width:200px;height:200px;overflow-x:auto;white-space:nowrap;">如上,我在多行文本框中,憋下一口气按住键盘S键不放,当s填满一行的时候,就跳到第二行去了,不是期望中的出现滚动条,然后滚动条不断的缩短....
我想到达效果就是像记事本选用了不自动换行的功能</textarea>

加white-space:nowrap就可以了

本回答被提问者采纳
第2个回答  2014-08-19
<!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>中的overflow-x:scroll;不可用。
回答:overflow-x:scroll你把x修改成Y就可以了

Chrome升级后 overflow-x: clip 失效了
通常处理方法是使用overflow-x: hidden隐藏超出区域或overflow-x: auto让右侧区域可滚动。然而,这里使用了overflow-x: clip,根据MDN文档解释,clip会在溢出截断边缘上的溢出内容被截断。距元素内边距框指定宽度范围内的内容溢出。clip与hidden的区别在于clip还禁止所有滚动,包括程序性滚动,且不会创建新的...

div中设定overflow-x:auto,但是不出滚动条,td宽度也不是给定的宽度
这个地方的,宽度设定是100%,后面再加上padding:10px;这样的整体宽度就不是100%了而是100%+20px, body不出现滚动条还有原因是你的body用了溢出隐藏,你把它去掉试试

CSS中overflow-y: visible;不起作用的解决方法
otherwise it is the pair of computed values of ‘overflow-x’ and ‘overflow-y’.大致意思是,当overflow-x为scroll或者auto时,overflow-y被设置为auto,反之亦然。这就很尴尬了,那怎么解决这个问题呢。ps: 上面那段话说是来自于w3c的文档,但是我找了半天没找到原文,麻烦找到了的小伙伴留个...

div+css中写了overflow-y:hidden;overflow-x:scroll; height:160px;为 ...
因为你的div中的内容还不足以让滚动条可用 你在这个容器里多加点东西要超出容器大小的再试试

ie 隐藏横向滚动条(overflow-x:hidden;)后,纵滚动条div内容被挡住.试...
将div的宽度设窄一点,ie要留出11px做滚动条的位置

overflow属性我会用,但overflow-x和y不明白什么意思
overflow-x : visible | auto | hidden | scroll 语法取值 visible :  默认值。不剪切内容也不添加滚动条。假如显式声明此默认值,对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效 auto :  在必需时对象内容才会被裁切或显示横向滚动条 hidden :  不显示超过...

overflow-x简介
通过使用 overflow-x 属性,开发者可以根据需要控制元素如何处理内容溢出,确保页面布局和用户体验的合理性。同时,这个属性与 overflow-y 属性一起使用,可以全面管理元素在垂直和水平方向上的内容管理。对应的脚本特性是 overflowX,在编写CSS样式或JavaScript交互时,可以利用它来动态调整元素的滚动行为。

在页面中加了左右滚动条下面的分页却不显示了,请问各位大神怎么解决...
jsp中增加水平滚动条显示效果有两种方法:1、通过body的scroll属性:<body scroll="yes"> 不过这个一般不管用 2、利用div的overflow <div style="overflow-x: scroll;">,使用div包含整个页面溢出部分的代码,利用div的这个样式:溢出是添加滚动条 ...

<body>中写入overflow-x: hidden; overflow-y: hidden;后
因为360浏览器和qq浏览器可能使用了IE内核,导致overflow-y设置成hidden之后页面无法正常滚动。这个时候你可以试试这个方法:不要在body里面加overflow属性,改成在<html>里面加IE、chrome和Firefox各自的专属滚动条属性:<html> <head> <style> html { -ms-overflow-style:none;overflow:-moz-scrollbars...

相似回答