[分享]css3文字转行

CSS3中提供了很多有用的样式，其中一个非常实用的功能就是文字转行。所谓的文字转行指的是当一串文字长度超出一定范围时，自动换行到下一行。这对于我们设计页面时解决文字排版的问题非常有帮助。CSS3中实现...

CSS3中提供了很多有用的样式，其中一个非常实用的功能就是文字转行。所谓的文字转行指的是当一串文字长度超出一定范围时，自动换行到下一行。这对于我们设计页面时解决文字排版的问题非常有帮助。

CSS3中实现文字转行可以使用word-wrap和white-space属性。其中word-wrap属性用于控制是否允许单词内断行，而white-space属性用于控制元素内空白的处理方式。

.word-wrap {
  word-wrap: break-word; /* 允许单词内断行 */
}

.white-space {
  white-space: nowrap; /* 避免空格换行 */
} 

在实际使用中，我们可以使用这两个属性来解决文字转行的问题。比如，在一个小的盒子内显示一段文字，而且我们希望文字超出盒子范围时自动换行。

.box {
  width: 200px; /* 宽度200px */
  height: 100px; /* 高度100px */
  border: 1px solid #ccc; /* 边框1px，灰色 */
  overflow: hidden; /* 溢出隐藏 */
  word-wrap: break-word; /* 允许单词内断行 */
  white-space: normal; /* 默认处理空白 */
}

.box p {
  margin: 0; /* 去除p标签默认边距 */
  padding: 10px; /* 内边距10px */
  text-align: justify; /* 两端对齐 */
}

<div class="box">
  <p>这是一段很长很长的文字，希望它不会超出这个盒子的范围，而是自动换行到下一行。</p>
</div> 

通过上面的代码片段，我们可以实现一个自动转行的文字盒子。其中box类用于定义一个盒子，p标签用于包裹文字内容。当文字长度超出盒子范围时，使用word-wrap属性允许单词内断行，保证文字能够自动转行到下一行。

总之，CSS3文字转行功能是一个非常实用的样式，可以帮助我们解决文字排版问题，使得网页排版更加美观。我们可以结合word-wrap和white-space属性来灵活使用，满足不同的设计需求。