需求
css文字超出换行怎么实现
实现
css文字超出换行
在Web设计中，我们经常会遇到文字内容超出父容器的情况。这时候，我们需要使用CSS来解决这个问题。CSS中提供了一些属性用于控制文字的换行和截断，本文将为大家介绍这些属性的用法以及实践案例。
一、文字换行
当文字内容超出父容器时，我们可以通过控制文字的换行方式来使其在父容器内自动折行。以下是常用的CSS属性：
word-wrap 该属性用于指定是否允许单词内换行，默认为normal。当该属性值为break-word时，如果一个单词长度超出容器宽度，将会自动折断该单词进行换行。
word-break 该属性用于指定单词如何断行，默认为normal。当该属性值为break-all时，会使得即便一个单词没有超出容器宽度，也会被断开。
以下是一个实例：
.container {
width: 200px;
height: 100px;
border: 1px solid #ddd;
overflow: hidden;
}
.text {
word-wrap: break-word;
word-break: break-all;
}
<div>
<p>这是一段很长很长很长很长很长很长很长的文字，它会超出容器的宽度，需要我们使用CSS来控制其换行。</p>
</div>
二、文字截断
当我们需要限制文字的长度而不是让其换行时，可以使用文字截断。以下是几个常用的CSS属性：
overflow 该属性用于指定父容器中内容超出容器大小时的表现方式，默认为visible。我们可以设置为hidden，表示内容超出的部分将被隐藏；或者设置为scroll，表示会显示滚动条。
text-overflow 该属性用于指定文本溢出时如何显示，默认为clip。我们可以设置为ellipsis，表示在文本溢出时自动加上省略号。
white-space 该属性用于控制元素内的空白如何被处理，默认为normal。我们可以设置为nowrap，表示文本不应换行，除非遇到”br”标签。
以下是一个实例：
.container {
width: 200px;
height: 50px;
border: 1px solid #ddd;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.text {
width: 100%;
}
<div>
<p>这是一段很长很长很长很长很长很长很长的文字，它会被截断并自动加上省略号。</p>
</div>
以上就是css文字超出换行的解决方案，希望可以对大家有所帮助。
原文始发于微信公众号（干货食堂）：css文字超出换行怎么实现
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之家整理，本文链接：https://www.bmabk.com/index.php/post/258466.html
