white-space 属性设置如何处理元素内的空白
这个属性声明建立布局过程中如何处理元素中的空白符
默认值: normal
JavaScript 语法: object.style.whiteSpace="pre"
例
规定段落中的文本不进行换行:
p
{
white-space: nowrap
}
值:
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值
参考:http://www.w3school.com.cn/css/pr_text_white-space.asp
span里的元素在被定义了 display:inline-block; 这个属性之后,就再也不会被断行了,也不会把外层的 div 撑开(除非span比div还要宽了),这样就达到了和英文单词一样的标签云效果了,
<style type="text/css">
<!--
body{font-size:12px; color:#fff;}
div{width:110px; background:#000;}
span{padding:10px;white-space:nowrap;}
-->
</style>
<div>
<span>标</span>
<span>标fdsfsdfdsfdsfsdf</span>
<span>标</span>
</div>
------------------------------------------------
此例中,li宽度不够时自动换行,而未加white-space:nowrap时,页面将会变形
<style type="text/css">
<!--
*{padding:0px;margin:0px;}
body{font-size:12px; color:#fff;}
div{width:200px; background:#000;}
ul,li{list-style:none;}
li{padding:10px;float:left;white-space:nowrap;}
a{color:#fff;}
-->
</style>
<div>
<ul>
<li><a href="#">里的元素</a></li>
<li><a href="#">里的元素</a></li>
<li><a href="#">里</a></li>
<li><a href="#">里的元素在被定义达到</a></li>
<li><a href="#">里的元素在被定义达到</a></li>
<li><a href="#">里的元素在被定义达到</a></li>
<li><a href="#">里的元素在被定义达到</a></li>
<li><a href="#">里的元素在被定义达到</a></li>
<li><a href="#">里的元素在被定义达到</a></li>
</ul>
</div>
<li rel="1" style="white-space: nowrap">
分享到:
相关推荐
css强制文字不换行,可给指定的容器增加white-space:nowrap即,下面把CSS示例写给大家,很简单
在web2.0的概念中,标签是个时常出现的东东,可是在设计时中文不象英文那样在表现标签云时表现的那么好,主要是中文词组的成为标签后,有时会出现长标签在标签云中被断行的问题。今天发现有人在问这个问题,以前遇到...
white-space:nowrap;//不换行 overflow-x: auto;子元素设置: display:inline-block; 方式二:scroll-view 标签 + 样式 scroll-view的横向滚动: scroll-view的内层view元素需要:display:inline-block; scroll-...
复制代码代码如下:{ white-space:nowrap; } 自动换行 复制代码代码如下:{ word-wrap: break-word; word-break: normal; } 强制英文单词断行复制代码代码如下:{ word-break:break-all; } CSS设置不转行: overflow...
代码如下: ... <div u00a0style=width:100px;height:20px;text-overflow:ellipsis; white-space:nowrap; overflow:hidden;...还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏
今天在做jsp页面展示的时候碰到一个...还需要设置 white-space 属性为 nowrap (限制不换行) 和 overflow 属性为 hidden (隐藏溢出) 即设置样式 style="text-overflow:ellipsis; white-space: nowrap; overflow:
详细的介绍了五笔输入法的运用.对初学者及进一步学习都是一个很好的资料
white-space:nowrap; font-size:36px; width:400px; } p { text-overflow:ellipsis; overflow:visible; white-space:nowrap; font-size:36px; width:400px; } <h1 style="font-size: 14px; color: ...
white-space:nowrap; //溢出不换行 但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢? 超出两行隐藏: css3解决了这个问题,解决方法如下: display:-webkit-box; //将对象作为弹性伸缩盒子模型显示...
white-space: nowrap; 这两个属性让起溢出隐藏和不换行,然后IE8用的时候记得不要加 复制代码代码如下: word-berak:break-all; word-wrap:break-word; 这样断开了,在IE8里面是不会变成省略号的(但是在IE6/7/FF/...
今天碰到了td文字内容不换行,发现是:white-space: nowrap,即强制文本不进行换行,顺便看了一下文本换行的属性word-wrap,总结如下: white-space的默认只是normal,自动换行。 word-break:break-all和word-wrap:...
white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; /* Opera */ text-overflow: ellipsis; /* IE, Safari (WebKit) */ [removed]: url('ellipsis.xml#ellipsis'); /* Firefox */ } </...
场景 最近要做的一个需求是移动端的h5页面,要求有一排可选择的卡片, 超出容器... white-space: nowrap; overflow-x: auto;不就搞定了嘛。Demo如下: <div class=delete_btn></div> <div class=delete_btn>
white-space:nowrap; 强制不换行,都起作用 5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行,超出部分隐藏且以省略号形式出现(部分浏览器支持) 代码: 复制代码代码如下: .p1{ word-...
white-space:nowrap;三个属性共同使用 text-overflow: clip;ellipsis;string clip: 直接隐藏不显示 ellipse: 用… 三个点来表示溢出的文字 (常用) string:可自定义符号来表示放不下的字符 <!DOCTYPE html> <...
white-space:nowrap; course:hand; margin:0 auto;} HTML---------------------- 非常多的字数你能控制得了不可能的骗你是小狗</div> ---------------------------------------------------------------------...
复制代码代码如下: white-space:nowrap;white-space:norma;display:inline-block; 超出自动隐藏 英方不断行显示 (必须在块元素内) 复制代码代码如下: overflow:hidden;white-space:nowrap; 而如果希望在文字后面...
白色终端大家好:D 支持从 7.0 到 8.1 的 ios 版本!! 改变了用户界面(比以前更酷)。 修复了一些问题(例如:重新启动子进程时的问题)。 彻底去除了屏幕上的黑线。 (此问题目前仅在 whiteterminal 中解决。...