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

前端 潘老师 2个月前 (12-12) 58 ℃ (0) 扫码查看

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

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

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

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

.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),学习愉快哦!


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/front/12511.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】