css如何实现长文本自动换行并且水平垂直居中

本文主要讲解关于css如何实现长文本自动换行并且水平垂直居中相关内容，让我们来一起学习下吧！

以下是一个html结构，一个div盒子中包裹着一个a标签文本

<div class="box1">
<a href="">欢迎访问潘子夜个人博客-www.panziye.com 这里有免费的学习资源和项目资源</a>
</div>

css结构，当文本超过div盒子高度的时候，用word-break: break-all;来实现自动换行

程序员导航

优网导航旗下整合全网优质开发资源，一站式IT编程学习与工具大全网站

立即访问

.box1 {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  word-break: break-all;//实现超过宽度自动换行
  text-align: center;//水平居中
  display: flex;
  align-items: center;//实现垂直居中
}

以上就是关于css如何实现长文本自动换行并且水平垂直居中相关的全部内容，希望对你有帮助。欢迎持续关注潘子夜个人博客（www.panziye.com），学习愉快哦！