1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行
#wrap{word-break:break-all; width:200px;}
或者
#wrap{word-wrap:break-word; width:200px;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
效果:可以实现换行
2.(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条
#wrap{word-break:break-all; width:200px; overflow:auto;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
firefox下的一个解决方法:
XBL binding
.wordwrap { -moz-binding: url('./wordwrap.xml#wordwrap'); }
wordwrap.xml的内容:
<?xml version = "1.0"?>
<bindings xmlns = "http://www.mozilla.org/xbl" xmlns:html = "http://www.w3.org/1999/xhtml">
<binding id = "wordwrap" applyauthorstyles = "false">
<implementation>
<constructor>
//<![CDATA[
var elem = this;
doWrap();
elem.addEventListener('overflow', doWrap, false);
function doWrap()
{
var walker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null, false);
while (walker.nextNode())
{
var node = walker.currentNode;
node.nodeValue = node.nodeValue.split('').join(String.fromCharCode('8203'));
}
}
//]]>
</constructor>
</implementation>
</binding>
</bindings>
<!-- Web2 -->
演示地址:http://ecmascript.stchur.com/blogcode/emulating_word_wrap_take2/
如果要通用的,跨浏览器的解决方案就只能用javascript
//aka makeDesignerHappy(dEl);
function breakWord(dEl){
if(!dEl || dEl.nodeType !== 1){
return false;
} else if(dEl.currentStyle && typeof dEl.currentStyle.wordBreak === 'string'){
//Lazy Function Definition Pattern, Peter's Blog
//From http://peter.michaux.ca/article/3556
breakWord = function(dEl){
//For Internet Explorer
dEl.runtimeStyle.wordBreak = 'break-all';
return true;
}
return breakWord(dEl);
}else if(document.createTreeWalker){
//Faster Trim in Javascript, Flagrant Badassery
//http://blog.stevenlevithan.com/archives/faster-trim-javascript
var trim = function (str) {
str = str.replace(/^\s\s*/, '');
var ws = /\s/,
i = str.length;
while (ws.test(str.charAt(--i)));
return str.slice(0, i + 1);
}
//Lazy Function Definition Pattern, Peter's Blog
//From http://peter.michaux.ca/article/3556
breakWord = function(dEl){
//For Opera, Safari, and Firefox
var dWalker = document.createTreeWalker(dEl, NodeFilter.SHOW_TEXT, null, false);
var node,s,c = String.fromCharCode('8203');
while (dWalker.nextNode())
{
node = dWalker.currentNode;
//we need to trim String otherwise Firefox will display
//incorect text-indent with space characters
s = trim( node.nodeValue ) .split('').join(c);
node.nodeValue = s;
}
return true;
}
return breakWord(dEl);
}else{
return false;
}
}
以上代码来自下面这个网址:
http://www.hedgerwow.com/360/dhtml/css-word-break.html
分享到:
相关推荐
CSS中的强制换行与强制不换行
更多的关于css强制换行 css强制不换行的css方法可以参考本站的内容页的文章控制.
css 自动换行 强制换行属性,在实际应用中,如果不强制换行会导致页面变形很难看,所以用下面的方法,即可解决此类问题。
主要为大家介绍了CSS强制换行对齐的实现方法,涉及css中text-justify属性的使用技巧,需要的朋友可以参考下
主要介绍了CSS自动换行、强制不换行、强制断行、超出显示省略号的相关资料,需要的朋友可以参考下
1、强制不换行,同时以省略号结尾。 复制代码代码如下: <div xss=removed> ...3、css强制英文单词断行 复制代码代码如下: div{word-break:break-all;} 若是div嵌套,要使内层div根据内容自动换行,则可只设置外层的
对于div 1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准。 #wrap{white-space:normal; width:200px;...效果:可以实现换行 2.(Firefox浏览器)white-space:normal; wor
css实现强制不换行/自动换行/强制换行
兼容多浏览器的强制不换行的CSS,主要以DIV为列子,分析个浏览器的解析特性
强制不换行 复制代码代码如下:{ white-space:nowrap; } 自动换行 复制代码代码如下:{ word-wrap: break-word; word-break: normal; } 强制英文单词断行复制代码代码如下:{ word-break:break-all; } CSS设置不转行...
而有些时候可能会强制内容不换行,多出的部分隐藏掉即可,关于强制不换行与强制换行的一些CSS属性WEBJX.com作一些整理,希望能给大家的工作和学习提供参考。 先了解以下几个属性: 强制不换行p....
只对中文起作用,强制换行 4. white-space:nowrap; 强制不换行,都起作用 5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行,超出部分隐藏且以省略号形式出现(部分浏览器支持) 代码: ...
<label><a>http://download.csdn.net/user/zxy397472251</a> <a>http://download.csdn.net/user/zxy397472251</a> <a>http://download.csdn.net/user/zxy397472251</a> <a>...</td>
CSS控制Table单元格强制换行与强制不换行 我们知道Div的换行和不换行的css写法。但对于表格单元格只知道一个属性nowrap可以使其不换行。 近日有此需要,但发现加上nowrap在某些情况下还是会换行!无奈,没有一个...
word-wrap用来控制换行 两种取值: (1)normal (2)break-word(此值用来强制换行,内容将在边界内换行,中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。) word-break用来控制断词 三种取值...
css中强制换行word-break、word-wrap、white-space区别实例说明,需要的朋友可以参考下
CSS实现强制不换行、自动换行、强制换行的css代码,需要的朋友可以参考下