`
yangyou230
  • 浏览: 1639758 次
文章分类
社区版块
存档分类

CSS有关文字的属性:white-space,text-overflow,word-wrap

 
阅读更多
<!-- .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

分享到:
评论

相关推荐

    css文本换行属性word-wrap和white-space使用总结

    今天碰到了td文字内容不换行,发现是:white-space: nowrap,即强制文本不进行换行,顺便看了一下文本换行的属性word-wrap,总结如下: white-space的默认只是normal,自动换行。 word-break:break-all和word-wrap:...

    英文强制换行css 使用css强制英文单词断行代码

    使用css属性word-break:break-all; 后的效果:如下图:   强制不换行 复制代码代码如下:{ white-space:nowrap; } 自动换行 复制代码代码如下:{ word-wrap: break-word; word-break: normal; } 强制英文单词断行...

    IE8/9 使用text-overflow: ellipsis 做块元素超长内容变省略号的问题

    word-wrap:break-word; 这样断开了,在IE8里面是不会变成省略号的(但是在IE6/7/FF/Chrome都没有问题),其实都单行省略了,本来也没有必要断词~-_-! 所以一般标准组合就是: 复制代码代码如下: overflow: hidden; ...

    CSS强制中英文换行与不换行 强制英文换行示例

    white-space:pre-wrap; 只对中文起作用,强制换行 4. white-space:nowrap; 强制不换行,都起作用 5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行,超出部分隐藏且以省略号形式出现(部分...

    css2中文手册 学习css的必选

    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-...

    css之自动换行实现代码

    space:normal,当定义的宽度之后自动换行 html &lt;div id=wrap&gt;正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义&lt;/div&gt; css #wrap{white-space:normal; width:200px; } 1.(IE浏览器)...

    css-common:常用的css总结

    white - space : normal ; overflow : hidden ; text - overflow : ellipsis ; display : - webkit - box ; - webkit - line - clamp : 1 ; - webkit - box - orient : vertical ; } .wrap span { display : ...

    css是如何实现在页面文字不换行、自动换行、强制换行的方法

    本文介绍了css是如何实现在页面文字不换行、自动换行、强制换行的方法,分享给大家,具体如下: 强制不换行 div{ white-space:nowrap; } 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词...

    三星9305收索

    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_...

    对于div,p等块级元素css如何实现自动换行

    复制代码代码如下: ”wrap”&gt;正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义&lt;/div&gt; css 复制代码代码如下: #wrap{white-space:normal; width:200px; } 1.(IE浏览器)连续的英文...

    CSS网页制作时实现自动换行的小技巧

    #wrap{white-space:normal; width:200px; } 或者 #wrap{word-break:break-all;width:200px;} eg. ddd1111111111111111111111111111111111 效果:可以实现换行  2.(Firefox浏览器)white-space:normal; w

    html文本溢出显示省略字符的两种常用解决方法

    方法一:使用CSS溢出省略的方式解决 解决效果如下: ... white-space: pre-wrap; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-lin

    26个常用易忘CSS小技巧

    收集于平时常用但易忘的CSS实现方法,如有遗漏或补充,还请指正! 解决inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移 ... white-space:nowrap;/*规定段落中的文本不进行换行 */ } // 多行

    百度地图开发文档

    word-wrap:break-word} &lt;/style&gt; [removed][removed] &lt;/head&gt; &lt;body&gt; &lt;!--百度地图容器--&gt; ;margin:auto auto;" id="dituContent"&gt; &lt;/body&gt; [removed] //创建和初始化地图函数: ...

    css控制文字自动换行的实现方法

    正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行 html 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义 css CSS Code复制内容到...

    CSS中一些常用的文本属性整理

    text-overflow 概要:其作用是解决文本溢出时,其展现的形式 该属性有两个参数,分别如下: CSS Code复制内容到剪贴板 ... white-space:nowrap:给文本容器设置强制不换行,让元素文本在一行内显示。 overflow:hid

    CSS 教程之内容设置的一些语法

    一、white-space  可以实现HTML中PRE标签的效果,以及单元格的noWrap效果。  语法: white-space : normal | pre | nowrap  取值: normal: 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会...

    Content-Swipe:基于Javascript和jQuery的组件,用于制作可滑动容器

    基于触摸和单击的可滑动内容组件基于Javascript和jQuery的组件,用于制作可滑动的容器,用于触摸设备和鼠标使用。例子简单的鼠标/手指可滑动文本框:... white-space: nowrap; } .swipable-box { width: 800px; height:

Global site tag (gtag.js) - Google Analytics