注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦与见

天空擅长,与世人分享寂寞。

 
 
 

日志

 
 
关于我

释寻,原名熊蕾。诗人,摄影师,设计师,网络工程师。 现居武汉。热衷艺术。 爱好诗文、音乐、美术、影视、IT等。 擅长写诗,绘画,摄影,平面设计,书刊排版,视频编辑,音频处理,网络建设等。

网易考拉推荐
 
 

div滚动条控制及文字内容强制换行  

2010-08-31 16:15:16|  分类: 整理收藏 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

<html>
<head><title>DIV中的滚动条</title></head>
<body>
<div style="height:50px;width:100px;overFlow-y:scroll;overFlow-

x:hidden;word-break:break-all">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

<div>
<body>
</html>

 

相关文章:

word-break:break-allword-wrap:break-word都是能使其容器如DIV的内容自动换行

它们的区别就在于:

1,word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。

2,word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。

3,word-break;break-all 支持版本:IE5以上 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。 WORD-WRAP:break-word 支持版本:IE5.5以上 内容将在边界内换行。如果需要,词内换行( word-break )也将发生。表格自动换行,避免撑开。 word-break : normal | break-all | keep-all 参数: normal :  依照亚洲语言和非亚洲语言的文本规则,允许在字内换行 break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本 keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本 语法: word-wrap : normal | break-word 参数: normal :  允许内容顶开指定的容器边界 break-word :  内容将在边界内换行。如果需要,词内换行(word-break)也行发生说明:设置或检索当当前行超过指定容器的边界时是否断开转行。

对应的脚本特性为wordWrap。请参阅我编写的其他书目。 语法: table-layout : auto | fixed 参数: auto :  默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢 fixed :  固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关说明:设置或检索表格的布局算法。对应的脚本特性为tableLayout。

建议:word-break 用3C检测会显示问题的,导致百度快照也会出问题-这个属性OPERA FIREFOX 浏览器也不支持 word-break属性可以用white-space:normal;来代替,这样在FireFox和IE下就都能正确换行,而且要注意,单词间的空格不能用来代替,不然不能正确换行。

 

=========================================================================

当div所定义的区域的内容达到一定程度时,在div标签里面嵌入css样式表,定义overflow的属性值,设置滚动条相关的属性。

<style tyle="text/css">
.testDiv{
border-style: solid ;
border-width: 50px ;
border-color: pink ;

position: absolute ;
top:200px ;
left:300px ;
height:200px ;
width:300px ;



overFlow-x: scroll ;
overFlow-y: hidden ;


scrollBar-face-color: green;
scrollBar-hightLight-color: red;
scrollBar-3dLight-color: orange;
scrollBar-darkshadow-color:blue;
scrollBar-shadow-color:yellow;
scrollBar-arrow-color:purple;
scrollBar-track-color:black;
scrollBar-base-color:pink;


}

</style>

注:

1. overFlow:

visible 却省值,没有滚动条,根据内容自动扩撑区域的大小,即定义的区域无效
scroll 总是显示滚动条
hidden 没有滚动条,超出区域的内容不可见
auto 根据内容自动判断是否添加滚动条

2.滚动条颜色属性:

  face-color:滑块颜色
  hightlight-color:高亮颜色
  3dlight-color:三维光线颜色
  darkshadow-color:暗影颜色
  shadow-color:阴影颜色
  arrow-color:箭头颜色
  track-color:滑道颜色
base-color:滚动条的主要颜色,其中包含滚动按钮和滚动滑块

 

1)隐藏滚动条
<body style="overflow-x:hidden;overflow-y:hidden">
(2)如何在单元格或图层中出现滚动条
<div style="width:200px;height:200px;overflow-x:auto;overflow-y:auto;"></div>
(3)javascript改变框架中滚动条的样式,比如改变颜色、改为平面效果等
<STYLE>  
BODY   {SCROLLBAR-FACE-COLOR:   #ffcc99;  
              SCROLLBAR-HIGHLIGHT-COLOR:   #ff0000;  
              SCROLLBAR-SHADOW-COLOR:   #ffffff;  
              SCROLLBAR-3DLIGHT-COLOR:   #000000;  
              SCROLLBAR-ARROW-COLOR:   #ff0000;  
              SCROLLBAR-TRACK-COLOR:   #dee0ed;  
              SCROLLBAR-DARKSHADOW-COLOR:   #ffff00;}  
</STYLE>  
  
说明:    
scrollbar-3dlight-color:color;设置或检索滚动条亮边框颜色;    
scrollbar-highlight-color:color;设置或检索滚动条3D界面的亮边颜色;    
scrollbar-face-color:color;设置或检索滚动条3D表面的颜色;    
scrollbar-arrow-color:color;设置或检索滚动条方向箭头的颜色;当滚动条出现但不可用时,此属性失效;    
scrollbar-shadow-color:color;设置或检索滚动条3D界面的暗边颜色;    
scrollbar-darkshadow-color:color;设置或检索滚动条暗边框颜色;    
scrollbar-base-color:color;设置或检索滚动条基准颜色。其它界面颜色将据此自动调整。    
scrollbar-track-color:color;设置或检索滚动条的拖动区域颜色    
备注:    
color为你要设置的颜色代码,可以是16进制的,比如#FF0000,可以是以RGB表示的,比如rgb(255,0,255);设置滚动条样式的时候不必要把所有的属性都用上才会生效。
(4)javascript中的页面元素定位
clientX、clientY是鼠标当前相对于网页的位置,当鼠标位于页面左上角时clientX=0, clientY=0;
offsetX、offsetY是鼠标当前相对于网页中的某一区域的位置,当鼠标位于页面中这一区域的左上角时offsetX=0, offsetY=0;
screenX、screenY是鼠标相对于用户整个屏幕的位置;
x、y是鼠标当前相对于当前浏览器的位置
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离(因为有滚动条的产生,所以目前页面可见内容是不定的)。
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。
left:对象相对于页面的X坐标。
top:对象相对于页面的Y坐标
(4)屏蔽选择,右键等
<body oncontextmenu=self.event.returnValue=false onselectstart="return false">

  评论这张
 
阅读(227)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017