文本框居中,文字自適應換行

BFC佈局詳解,模塊垂直居中詳解:https://www.cnblogs.com/hz1124/p/6131795.html 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example </title>
  </head>
  <body>
    <div class="box">
      <p class="charset"> 
          assafadsassssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
      </p>
    </div>
  </body>
</html>

<style>
  body,html{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
  }
  .box{
    height: 300px;
    width: 300px;
    background-color: bisque;
    display: flex;
    position: relative;
  }
  .charset{
    width: 100%;
    word-wrap: break-word;
    word-break: break-all;
  }
</style>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章