首頁  >  文章  >  web前端  >  css溢位與換行該如何處理

css溢位與換行該如何處理

零下一度
零下一度原創
2017-05-03 15:48:452908瀏覽

一、溢出處理

    1、處理空白

      文字過長,在容器內顯示不下的時候,是否要換行

      屬性:white-space : normal / nowrap

              normal :    nowrap : 不換行

    2、文字溢位

       溢出後的處理方式,

若要隱藏溢出的內容,可以考慮使用該屬性。

       注意:此屬性必須與overflow:hidden

搭配

       屬性#: text-overflow

##       取值:

           1

clip

,裁減,攔腰截斷                     2

ellipsis

#,以... ( :

<!DOCTYPE html >
<head>
  <title>文本格式</title>
  <meta charset="utf-8" />
   <style>
     p{
        width:150px;
height:50px;
border:1px solid black;
overflow:hidden;
}
#d1{
       white-space:normal;
   text-overflow:ellipsis;
}
#d2{
       white-space:nowrap;
   text-overflow:clip;
}
#d3{
       white-space:nowrap;
   text-overflow:ellipsis;
}
   </style>
</head>
<body>
   <p id="d1">longlonglonglonglonglonglonglonglonglong无法在框中容纳</p><br/>
   <p id="d2">longlonglonglonglonglonglonglonglonglong无法在框中容纳</p><br/>
   <p id="d3">longlonglonglonglonglonglonglonglonglong无法在框中容纳</p>
</body>
</html>

、換行
  1.     注意:只對英文有效

      1、長單詞換行

            word-wrap :

         normal : 默認,採用瀏覽器默認形式,不破壞單詞結構

break-word :

破壞單字的結構

      2

、文字換行

      word-break:

     選擇值 取值: ##            normal:

                     1#         keep-all :

在半角狀態下的空格下進行換行

<!DOCTYPE html >
<head>
  <title>文本格式</title>
  <meta charset="utf-8" />
   <style>
     p{
        width:150px;
height:50px;
border:1px solid black;
}
     #d1{
       word-wrap:break-word;
}
#d2{
       word-break:break-all;
}
#d3{
       word-break:keep-all;
}
   </style>
</head>
<body>
    <p id="d1">this is a longlonglonglonglongtext,如何换行?</p><br/><br/>
<p id="d2">this is a longlonglonglonglongtext,如何换行?</p><br/><br/>
<p id="d3">this is a longlonglonglonglongtext,如何换行?</p>
</body>
</html>

以上是css溢位與換行該如何處理的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn