css p、div标签内长英文自动换行&长中文不换行

长英文换行

在css中 div,p,h标签等遇到连续的大段英文和数字时候,并不会按照正常情况下自动随盒子宽度限制而自动换行。
解决办法: word-wrap:break-word
解释:使用break-word时,是将强制换行。
参考链接: css word-break

<div class="demo">
dsfaskfhsdfljksdhfkjsdhfkjlskflhsdfjkhsdjfkhsdlfkjhsdfsadkljfhsadkjfhskdjsadfasdfsadfsadfasdfsadfsdfsadfsadfsfsdfasfsadfsdf
</div>  

// css
.demo {
  width: 200px;
  height: 50px;
  line-height: 50px;
  word-wrap: break-word;
}

长中文不换行

有时候碰到某段长中文,不想照正常情况下自动随盒子宽度限制而自动换行。
解决办法: white-space:nowrap
解释:使用white-space时,是将强制不换行。
参考链接: css white-space

<div class="demo">
富强、民主、文明、和谐,倡导自由、平等、公正、法治,倡导爱国、敬业、诚信、友善
</div>  

// css
.demo {
  width: 200px;
  height: 50px;
  line-height: 50px;
  white-space:nowrap
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容