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>

強(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)嗟奈谋尽Ｗ址畠?nèi)容將被添加在內(nèi)容區(qū)域中，所以會(huì)減少顯示出的文本。如果空間太小到連省略號(hào)都容納不下，那么這個(gè)字符串也會(huì)被截?cái)唷?/li>

p{ overflow: hidden; text-overflow: ellipsis;}

在線咨詢

上一篇：「CSS」將多個(gè)div元素并列為一行的方法
下一篇：HTML常用全部代碼，你懂，你不想成功都難

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

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

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