整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          HTML里h1~h6標(biāo)簽和p標(biāo)簽里的內(nèi)容不會(huì)自動(dòng)換行?

          -p標(biāo)簽內(nèi)文字在界面內(nèi)是換行顯示的,但是在網(wǎng)頁(yè)中不換行,問題怎么用現(xiàn)有學(xué)習(xí)的知識(shí)解決.

          上圖中單純的在p標(biāo)簽內(nèi)換行,但是沒有顯示換行,怎么用初學(xué)經(jīng)驗(yàn)解決

          1-1 使用標(biāo)題標(biāo)簽h1~h6實(shí)現(xiàn)換行

          1-2 用p標(biāo)簽斷開,實(shí)現(xiàn)換行

          1-3用換行標(biāo)簽 br 實(shí)現(xiàn)換行

          1-4用分割線實(shí)現(xiàn)換行

          (僅是學(xué)習(xí)總結(jié),相信還有其他的辦法,但是現(xiàn)階段html還沒有學(xué)到,后期再加~)

          古詩(shī)文文字示例

          籌筆驛

          拋擲南陽(yáng)為主憂,北征東討盡良籌。

          時(shí)來(lái)天地皆同力,運(yùn)去英雄不自由。

          千里山河輕孺子,兩朝冠劍恨譙周。

          唯余巖下多情水,猶解年年傍驛流。

          示例截圖如下(去掉一些自己測(cè)試寫的東西主要的留下了剛好能截全)

          (僅為個(gè)人自學(xué)的一點(diǎn)點(diǎn)思考,如有錯(cuò)漏,歡迎留言指正,還有許多的問題呈現(xiàn),敬請(qǐng)期待~~~)

          HTML的經(jīng)常會(huì)遇到一長(zhǎng)串連續(xù)的字幕或者數(shù)字在頁(yè)面中沒辦法折斷換行,導(dǎo)致了頁(yè)面排版很亂。

          默認(rèn)情況下,一個(gè) DIV或者其他元素的文本,如果都是無(wú)文字分隔符,無(wú)空格,則不會(huì)自動(dòng)換行。

          其實(shí)用一句很經(jīng)典的CSS,就可以解決這個(gè)大麻煩。代碼如下:

          <div class="detail_title" style="word-break: break-all;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

          把這段代碼放到HTML文件里試試看。

          5代碼:

          <!doctype html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <meta name="viewport"
                    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
              <meta http-equiv="X-UA-Compatible" content="ie=edge">
              <title>Document</title>
              <style>
                  p{
                      width: 200px;
                      background-color: #aaa;
                  }
                  .p1{
                      white-space: nowrap;
                  }
                  .p2{
                      word-wrap: break-word;
                  }
                  .p3{
                      word-break: break-all;
                  }
                  .p4{
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                  }
              </style>
          </head>
          <body>
          <p class="p1">comrem dfgdsgfd sdffafsdafa dsfaf sdfsaf thgwer awdafqew</p>
          <p class="p2">ljj ljljoi hsgfa tgregv dsgrewg ygvsg werfwgr rweg vcdgss</p>
          <p class="p3">comrem dfgdsgfd sdffafsdafa dsfaf sdfsaf thgwer awdafqew</p>
          <p class="p4">comrem dfgdsgfd sdffafsdafa dsfaf sdfsaf thgwer awdafqew dgadsfs</p>
          </body>
          </html>


          1. 強(qiáng)制不換行:white-space 屬性是用來(lái)設(shè)置如何處理元素中的空白;

          屬性:

          • normal 默認(rèn)??瞻讜?huì)被瀏覽器忽略。
          • pre 空白會(huì)被瀏覽器保留。其行為方式類似 HTML 中的 pre 標(biāo)簽。
          • nowrap 文本不會(huì)換行,文本會(huì)在在同一行上繼續(xù),直到遇到 br 標(biāo)簽為止。
          • pre-wrap 保留空白符序列,但是正常地進(jìn)行換行。
          • pre-line 合并空白符序列,但是保留換行符。
          • inherit 規(guī)定應(yīng)該從父元素繼承 white-space 屬性的值。
          p{  white-space: nowrap;}


          2、自動(dòng)換行:word-wrap屬性用來(lái)標(biāo)明是否允許瀏覽器在單詞內(nèi)進(jìn)行斷句,這是為了防止當(dāng)一個(gè)字符串太長(zhǎng)而找不到它的自然斷句點(diǎn)時(shí)產(chǎn)生溢出現(xiàn)象;

          屬性:

          • normal: 只在允許的斷字點(diǎn)換行(瀏覽器保持默認(rèn)處理)
          • break-word:在長(zhǎng)單詞或URL地址內(nèi)部進(jìn)行換行
          p{  word-wrap: break-word;}


          3、強(qiáng)制斷行:word-break 屬性用來(lái)標(biāo)明怎么樣進(jìn)行單詞內(nèi)的斷句;

          屬性:

          • normal:使用瀏覽器默認(rèn)的換行規(guī)則。
          • break-all:允許在單詞內(nèi)換行
          • keep-all:只能在半角空格或連字符處換行
          p{  word-break: break-all;}


          4、溢出顯示省略號(hào):ext-overflow CSS 屬性確定如何向用戶發(fā)出未顯示的溢出內(nèi)容信號(hào)。它可以被剪切,顯示一個(gè)省略號(hào)(’…’,U + 2026 HORIZONTAL ELLIPSIS)或顯示一個(gè)自定義字符串;

          • 屬性:clip這個(gè)關(guān)鍵字的意思是"在內(nèi)容區(qū)域的極限處截?cái)辔谋?#34;,因此在字符的中間可能會(huì)發(fā)生截?cái)?。為了能在兩個(gè)字符過渡處截?cái)?,你必須使用一個(gè)空字符串值 (’’)(To truncate at the transition between two characters, the empty string value (’’) must be used.)。此為默認(rèn)值。
          • ellipsis這個(gè)關(guān)鍵字的意思是“用一個(gè)省略號(hào) (’…’, U+2026 HORIZONTAL ELLIPSIS)來(lái)表示被截?cái)嗟奈谋尽?。這個(gè)省略號(hào)被添加在內(nèi)容區(qū)域中,因此會(huì)減少顯示的文本。如果空間太小到連省略號(hào)都容納不下,那么這個(gè)省略號(hào)也會(huì)被截?cái)唷?/li>
          • string用來(lái)表示被截?cái)嗟奈谋尽W址畠?nèi)容將被添加在內(nèi)容區(qū)域中,所以會(huì)減少顯示出的文本。如果空間太小到連省略號(hào)都容納不下,那么這個(gè)字符串也會(huì)被截?cái)唷?/li>
          p{ overflow: hidden; text-overflow: ellipsis;}

          主站蜘蛛池模板: 韩国女主播一区二区| 亚洲一区二区三区四区视频| 国产精品亚洲一区二区三区久久| 日韩精品无码免费一区二区三区| 亚洲线精品一区二区三区影音先锋| 波多野结衣的AV一区二区三区| 曰韩精品无码一区二区三区| 91在线一区二区三区| 成人区人妻精品一区二区三区| 在线|一区二区三区| 久久久久久一区国产精品| 亚洲AV无码一区二区乱子伦| 国产经典一区二区三区蜜芽| 国产精品熟女视频一区二区 | 香蕉久久av一区二区三区| 国产精品分类视频分类一区| 免费一区二区三区在线视频| 久久久久成人精品一区二区| 国产乱码精品一区二区三区香蕉 | 日本精品一区二区久久久| 国产精品毛片一区二区三区| 国产微拍精品一区二区| 国模私拍一区二区三区| 丰满爆乳无码一区二区三区| 三上悠亚一区二区观看| 怡红院美国分院一区二区| 中文字幕亚洲一区二区va在线| 国产成人久久精品区一区二区| 精品成人av一区二区三区| 亚洲熟妇成人精品一区| 精品一区二区三区免费观看| 日韩成人无码一区二区三区| 自慰无码一区二区三区| 国产一区二区三区福利| 97se色综合一区二区二区| 久久国产精品一区| 国产aⅴ一区二区三区| 亚洲国产成人久久综合一区 | 精品无码一区二区三区亚洲桃色| 色精品一区二区三区| 无码中文人妻在线一区二区三区 |