<!--
.ellipsis {
width:190px;
overflow:hidden;
height:20px;
white-space:nowrap;
}
.afterMe{
width:200px;
position:relative;
}
.afterMe var {
display:block;
background:#FFFFFF none repeat scroll 0 0;
bottom:0;
position:absolute;
right:0;
top:0;
}
.afterMe var:after{
content:'...';
font:12px/1.2 Verdana;
}
.wordWrap {
width:190px;
}
p{
font-weight:bold;
}
h2 {
color:blue;
}
-->
white-space
This is a div with white-space normal
A very, very, very, very, very, very, very, very, very long text
This is a div with white-space nowrap
A very, very, very, very, very, very, very, very, very long text
This is a div with NOBR
A very, very, very, very, very, very, very, very, very long text
w3school white-space
Value
Description
normal |
Sequences of whitespace will collapse into a single
whitespace. Text will wrap when necessary. This is default |
nowrap |
Sequences of whitespace will collapse into a single
whitespace. Text will never wrap to the next line. The text continues on the same line until
a <br /> tag is encountered |
pre |
Whitespace is preserved by the browser. Text will only wrap
on line breaks Acts like the
<pre> tag in HTML |
pre-line |
Sequences of whitespace will collapse into a single
whitespace. Text will wrap when necessary, and on line breaks |
pre-wrap |
Whitespace is preserved by the browser. Text will wrap when
necessary, and on line breaks |
inherit |
Specifies that the value of the white-space property should be inherited
from the parent element |
text-overflow
This is a div without text overflow
A very, very, very, very, very, very, very, very, very long text
This is a div text overflow: ellipsis. for internet explorer, must use together with white-space
A very, very, very, very, very, very, very, very, very long text
This is a div text overflow: for Firefox using -moz-binding
A very, very, very, very, very, very, very, very, very long text
This is a div text overflow: for Firefox Safari using presudo CSS :after
A very, very, very, very, very, very, very, very, very long text
word-wrap
This is a div text without word-wrap
thisisaveryverylongwordthisisaveryverylongword
This is a div text word-wrap:break-word
thisisaveryverylongwordthisisaveryverylongword
分享到:
相关推荐
今天碰到了td文字内容不换行,发现是:white-space: nowrap,即强制文本不进行换行,顺便看了一下文本换行的属性word-wrap,总结如下: white-space的默认只是normal,自动换行。 word-break:break-all和word-wrap:...
使用css属性word-break:break-all; 后的效果:如下图: 强制不换行 复制代码代码如下:{ white-space:nowrap; } 自动换行 复制代码代码如下:{ word-wrap: break-word; word-break: normal; } 强制英文单词断行...
word-wrap:break-word; 这样断开了,在IE8里面是不会变成省略号的(但是在IE6/7/FF/Chrome都没有问题),其实都单行省略了,本来也没有必要断词~-_-! 所以一般标准组合就是: 复制代码代码如下: overflow: hidden; ...
white-space:pre-wrap; 只对中文起作用,强制换行 4. white-space:nowrap; 强制不换行,都起作用 5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行,超出部分隐藏且以省略号形式出现(部分...
text-indent text-overflow vertical-align text-align layout-flow writing-mode direction unicode-bidi word-break line-break white-space word-wrap text-autospace text-kashida-space text-justify ruby-...
space:normal,当定义的宽度之后自动换行 html <div id=wrap>正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div> css #wrap{white-space:normal; width:200px; } 1.(IE浏览器)...
white - space : normal ; overflow : hidden ; text - overflow : ellipsis ; display : - webkit - box ; - webkit - line - clamp : 1 ; - webkit - box - orient : vertical ; } .wrap span { display : ...
本文介绍了css是如何实现在页面文字不换行、自动换行、强制换行的方法,分享给大家,具体如下: 强制不换行 div{ white-space:nowrap; } 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词...
vertical-align:text-bottom;font-style:normal;overflow:hidden;margin-right:5px}.bg_tuiguang_browser_big{width:56px;height:56px;position:absolute;left:10px;top:10px;background-position:-600px -24px}.bg_...
复制代码代码如下: ”wrap”>正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div> css 复制代码代码如下: #wrap{white-space:normal; width:200px; } 1.(IE浏览器)连续的英文...
#wrap{white-space:normal; width:200px; } 或者 #wrap{word-break:break-all;width:200px;} eg. ddd1111111111111111111111111111111111 效果:可以实现换行 2.(Firefox浏览器)white-space:normal; w
方法一:使用CSS溢出省略的方式解决 解决效果如下: ... white-space: pre-wrap; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-lin
收集于平时常用但易忘的CSS实现方法,如有遗漏或补充,还请指正! 解决inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移 ... white-space:nowrap;/*规定段落中的文本不进行换行 */ } // 多行
word-wrap:break-word} </style> [removed][removed] </head> <body> <!--百度地图容器--> ;margin:auto auto;" id="dituContent"> </body> [removed] //创建和初始化地图函数: ...
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行 html 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义 css CSS Code复制内容到...
text-overflow 概要:其作用是解决文本溢出时,其展现的形式 该属性有两个参数,分别如下: CSS Code复制内容到剪贴板 ... white-space:nowrap:给文本容器设置强制不换行,让元素文本在一行内显示。 overflow:hid
一、white-space 可以实现HTML中PRE标签的效果,以及单元格的noWrap效果。 语法: white-space : normal | pre | nowrap 取值: normal: 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会...
基于触摸和单击的可滑动内容组件基于Javascript和jQuery的组件,用于制作可滑动的容器,用于触摸设备和鼠标使用。例子简单的鼠标/手指可滑动文本框:... white-space: nowrap; } .swipable-box { width: 800px; height: