美浩工作室是一个以90后团队为主的网站设计,制作,优化,维护为一体的网站建设工作室,为您量身定制适合企业自身的网站,欢迎咨询:15249241469

div中文换行英文不换行的解决方法

HTML/CSS mihoweb 2450℃ 0评论

未标题-1

问题:在一个width=100px的div块里输中文到了100px会自动换行,英文却会不断加大width像素(不会换行),这是怎么回事?

答案:打英文的时候肯定是连打了,正确的英文单词之间一定有空格, 一但有空格就会换行!!

问题:如何实现不管是否是单词,都会强制换行!

回答:div加上word-break:break-all;样式。但是ie下可以,ff下不可以。

问题:如何在ie和ff下都可以

回答:结合xml

代码如下:

.wordwrap
{
word-wrap:break-word;
word-break:break-all;
-moz-binding: url(‘../../JavaScript/wordwrap.xml#wordwrap’);//这里的路径自己安排!
overflow: hidden;
}

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;

elem.addEventListener('overflow',
function()
{
var exp = / <​\/*[​_\s="'\w]+>/g;

var txt = elem.innerHTML;
var chars = txt.split(”);
var newTxt = chars.join(‘​’);
newTxt = newTxt.replace(exp, reconstructTag);
elem.innerHTML = newTxt;
},false);

function reconstructTag(_tag)
{
return _tag.replace(/​/g, ”);
}

//]]>
</constructor>
</implementation>
</binding>

</bindings>
<!– Web2 –>

如果您喜欢这篇文章,欢迎分享订阅。

转载请注明:美浩工作室官方博客 » div中文换行英文不换行的解决方法

喜欢 (2)