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

682 阅读1分钟

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

<div class="box1">
<a href="">hhhhhhfdsdsfdsfsfvdsdfdsfdxfgdfggs</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;//实现垂直居中
}