word-wrap:break-word; overflow:hidden;
而不是
word-wrap:break-word; word-break:break-all;
也不是
word-wrap:break-word; overflow:auto;
这种最好的方式,在 IE 下没有任何问题,在 FF 下,长串英文会被遮住超出的内容。
技术总结:
word-wrap是控制换行的。
使用break-word时,是将强制换行。中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。
break-word是控制是否断词的。
normal是默认情况,英文单词不被拆开。
break-all,是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题。
keep-all,是指Chinese, Japanese, and Korean不断词。即只用此时,不用word-wrap,中文就不会换行了。(英文语句正常。)
IE下:
使用word-wrap:break-word;所有的都正常。
FireFox下:
如这2个都不用的话,中文不会出任何问题。英文语句也不会出问题。但是,长串英文会出问题。
为了解决长串英文,一般用word-wrap:break-word;word-break:break-all;。但是,此方式会导致,普通的英文语句中的单词会被断开(IE下也是)。
目前主要的问题存在于 长串英文 和 英文单词被断开。其实长串英文就是一个比较长的单词而已。即英文单词应不应该被断开那?那问题很明显了,显然不应该被断开了。对于长串英文,就是恶意的东西,自然不用去管了。但是,也要想些办法,不让它把容器撑大。
用:overflow:auto; IE下,长串会自动折行。FireFox下,长串会被遮盖。
所以,综上,最好的方式是word-wrap:break-word;overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。
word-wrap:break-word;overflow:auto;在IE下没有任何问题。在FireFox下,长串会被遮住部分内容。
分享到:
相关推荐
本文将详细介绍CSS文本如何实现折行,需要的朋友可以参考下
CSS3折纸样式文本标题特效
CSS3折纸样式文本标题特效是一款jQuery基于CSS3属性制作页面标题文字弯曲排列悬停特效。
文本内容较多时,展示需要特殊处理。可折叠,可展开。细节处理优化~
内容索引:脚本资源,CSS特效,层折叠,层展开 一个基于CSS+JS实现DIV层展开收缩代码,实现类似打开与关闭的功能,可以应用到网页的任何部分,直接拷贝代码就能使用,具体效果大家可看截图。
点击“more”显示更多隐藏文字内容,渐渐显示,在IE 等不支持CSS3浏览器下效果较差,建议在火狐浏览器下浏览,懒人之家推荐下载
CSS3折纸样式文本标题特效是一款jQuery基于CSS3属性制作页面标题文字弯曲排列悬停特效。
6.1.2 变换表格行背景色 153 6.1.3 变换单元格背景色 154 6.2 CSS控制表格的颜色交替 155 6.3 CSS控制表格边框 156 6.4 制作圆角框 157 6.5 小结 159 第7章 表单样式设计 160 7.1 表单样式设计 161 7.1.1 表单透明化...
文本、图像、超链接、列表、菜单、网站导航、表单、数据表格、浮动布局等CSS布局控制。),智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web标准...
CSS 列表属性可以设置 列表标识 列表项样式 1 1 属性 描述 list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。 list-style-image 将图象设置为列表项标志。 list-style-position 设置列表中列表项...
在本文中,任何一个元素都被文本流所限制了自身的位置,但是通过CSS我们依然使得这些元素可以改变自己的位置,我们可以通过float来让元素浮动,我们也可以通过margin来让元素产生位置移动。 折叠
在本文流中,任何一个元素都被文本流所限制了自身的位置,但是通过CSS我们依然使得这些元素可以改变自己的位置,我们可以通过float来让元素浮动,我们也可以通过margin来让元素产生位置移动。但是事实上那并非是真实...
前段时间在公司移动站的重构,遇到了一个产品列表title的需求是只显示两行,然后超过两行的字符用省略号显示。如下图的效果,当时第一感觉是这个需求只能通过后台输出的时候截取字符去处理,或者通过JS计算字符来...
Notepad++是 Windows操作系统下的一套文本编辑器(软件版权许可证: GPL),有完整的中文化接口及支持多国语言编写的功能(UTF8 技术)。 Notepad++功能比 Windows 中的 Notepad(记事本)强大,除了可以用来制作一般的纯...
前文 这是的一个经典的老问题,因为之前刚好有... 文本上下间距10px 文本上下间距10px 看这个例子中的两个p标签,根据样式定义:第一个p的margin-bottom和第二个p的margin-top 都是10px,那实际距离应该等于20p
支持的语言: C, C++ , Java ,pascal, C#, XML,SQL,Ada, HTML, PHP, ASP, AutoIt, 汇编, DOS批处理, Caml, COBOL, Cmake, CSS, D, Diff, ActionScript, Fortran, Gui4Cli, HTML, Haskell, INNO, JSP, KIXtart, LISP, ...
④、提供数个特色东东,如 邻行互换位置、宏功能,等等...现在网上有很多文件编辑器,这个却是不可多得的一款,不论是日常使用还是手写编程代码,都能让你体会到它独有的优势和方便。 支持的语言: C, C++ , Java , ...
本文介绍了css是如何实现在页面文字不换行、自动换行、强制换行的方法,分享给大家,具体如下: 强制不换行 ...nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象 设置强行换行 word-br
Notepad++是Windows操作系统下的一套文本编辑器(软件版权许可证: GPL),有完整的中文化接口及支持多国语言编写的功能(UTF8技术)。 Notepad++功能比 Windows 中的 Notepad(记事本) 强大,除了可以用来制作一般的纯...