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

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

作者: littlelights | 来源:发表于2017-08-11 11:17 被阅读0次

长英文换行

在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
}

相关文章

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

    长英文换行 在css中 div,p,h标签等遇到连续的大段英文和数字时候,并不会按照正常情况下自动随盒子宽度限制而...

  • html

    :p标签的文本会在一个段落中自动换行。div标签内的文本也会在一个段落中自动换行。 :换行标签,使自动换行。文本格...

  • 杂记

    页面中中文标点符号换行问题,可以在CSS中设置父级div: span标签自助换行: 自定义格子标签布局:以下样式是...

  • css 换行 首行缩进 鼠标样式

    css换行 1⃣️强制不换行 2⃣️自动换行 3⃣️强制英文单词断行 4⃣️本人在用 中英文都换行 ⚠️:官方解释...

  • 内容自动换行

    1.英文超长自动换行-单词不折断 2.中文换行

  • pre 自动换行

    pre 标签实现自动换行,在css添加如下属性:

  • HTML系列知识(二)

    HTML段落 标签即表示段落,是paragraph的缩写,自带换行效果 在p标签中的文本会自动换行,不在p标签中的...

  • CSS零碎

    CSS自动换行、强制不换行、强制断行、超出显示省略号 使用white-space属性强制不换行p { white-...

  • p标签自动换行

  • css中实现强制不换行/自动换行/强制换行

    1. 强制不换行 div{ white-space:nowrap; } 2. 自动换行 div{ word-w...

网友评论

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

    本文链接:https://www.haomeiwen.com/subject/smslrxtx.html