HTML5基础加强css样式篇(white-space属性)(四十三)
2017-04-07 16:00
615 查看
1.white-space 属性设置如何处理元素内的空白
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box { margin: 100px 0 0 100px; width: 200px; height: 200px; background-color: orange; /* normal 默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。 pre-wrap 保留空白符序列,但是正常地进行换行。 pre-line 合并空白符序列,但是保留换行符。 inherit 规定应该从父元素继承 white-space 属性的值。*/ /*保留所有的空白*/ white-space: pre; /*保留换行*/ white-space: pre-line; white-space: pre-wrap; } .box:hover { } </style> </head> <body> <div class="box"> function test(){ } </div> <script type="text/javascript"> </script> </body> </html>
相关文章推荐
- HTML5基础加强css样式篇(CSS3 文本 - 英文单词截断与不截断:word-break,overflow-wrap,white-space)(四十二)
- HTML5基础加强css样式篇(css属性:怪异盒模型解析)(四十六)
- HTML5基础加强css样式篇(伸缩容器属性:flex-direction, flex-wrap,flex-flow,align-items,align-content)(五十三)
- HTML5基础加强css样式篇(css属性transform 函数(2D)时钟)(二十六)
- HTML5基础加强css样式篇(font-family,font-size, font-style,font-variant, font-weight , font 简写属性 )(五)
- HTML5基础加强css样式篇(css过渡属性简写,cubic-bezier过度曲线函数使用)(二十)
- HTML5基础加强css样式篇(css属性transform 函数(2D)的scale(),transform-origin,skew(),translate(),rotate() )(二十四)
- HTML5基础加强css样式篇(animation填充属性:animation-fill-mode,播放控制属性:animation-play-state,播放顺序设置,)(三十一)
- HTML5基础加强css样式篇(DOM的属性操作(对class属性值的操作 setAttribute,removeAttribute,classlist:remove,add,toggle))(七)
- HTML5基础加强css样式篇(css属性border详解:图片边框border-image-slice,border-image-repeat,border-image-width(二))(三十四)
- HTML5基础加强css样式篇(css过渡属性的隐式过渡问题)(二十二)
- HTML5基础加强css样式篇(标签自定义属性)(八)
- HTML5基础加强css样式篇(伸缩容器子元素属性:order,flex-grow,flex-shrink,flex-basis,flex,align-self)(五十四)
- HTML5基础加强css样式篇(属性选择器)(十四)
- HTML5基础加强css样式篇(css属性border圆角:border-radius)(三十五)
- HTML5基础加强css样式篇(animation属性animation-name,animation-delay,animation-duration,等)(三十)
- HTML5基础加强css样式篇(盒子阴影属性:box-shadow)(三十六)
- HTML5基础加强css样式篇(css属性border详解(一))(三十三)
- HTML5基础加强css样式篇(css属性transform 函数(3D)3D盒子)(二十七)
- HTML5基础加强css样式篇(文字阴影css属性:text-shadow)(四十四)