p标签不自动换行原因

前言:发现以前写的就像是笔记,哪像博客啊,这里再次修改。

 

问题描述: 在固定宽度的p元素里(任何块级元素同理),长单词不自动换行,中文字符会自动换行,效果如:http://codepen.io/aliceluojuan/pen/rrxbpO

产生原因:1.英文会将不包含空格、换行的连续文本认为是一个词,所以在默认情况下不换行;

     2.中文的话标点文字都是独立的,所以会自动换行;

解决方案:

在英文字不改变内容的情况下,通过设置p元素的

p{

    word-wrap:break-word
    /*或者是下面一种方法让单词强制换行*/
/*
word-break: break-all;
*/
}

也可以强制将单词换行,demo;

 

但是word-wrap和word-break的区别是什么呢? 

请看这篇文章咯,讲得很详细http://www.cnblogs.com/2050/archive/2012/08/10/2632256.html;我也验证过哟!

 

posted @ 2015-10-23 11:23  印前  阅读(19301)  评论(0编辑  收藏  举报