css文字换行问题

Question

css 实现文字超出时换行，为使多行时显示紧凑设置了行高，当一行时如何保证居中显示？

line-height: 25px;
word-wrap: break-word;
word-break: break-all;
overflow: hidden;

Answer 1

flex布局不就搞定了么？

.box {
      display: flex;
      align-items: center;
    }
    .name {
      margin-right: 10px;
      flex: none;
    }
    .detail {
      color: gray;
      line-height: 25px;
      word-wrap: break-word;
      word-break: break-all;
      overflow: hidden;
    }


// html
   <div class="box">
      <div class="name">地址</div>
      <div class="detail">详情阿萨的好方法合适的借口和防腐剂</div>
   </div>

   <br />
   <br />
   <br />
   <div class="box">
    <div class="name">地址</div>
    <div class="detail">详情阿萨的好方法合适的借口和防腐剂详情阿萨的好方法合适的借口和防腐剂详情阿萨的好方法合适的借口和防腐剂详情阿萨的好方法合适的借口和防腐剂详情阿萨的好方法合适的借口和防腐剂详情阿萨的好方法合适的借口和防腐剂详情阿萨的好方法合适的借口和防腐</div>

效果

Answer 2

你可以参考这个https://blog.csdn.net/weixin_...