CSS自動換行、強制不換行、強制斷行、超出顯示省略號

標(biāo)簽是默認(rèn)是自動換行的，因此設(shè)置好寬度之后，能夠較好的實現(xiàn)效果，但是最近的項目中發(fā)現(xiàn)，使用ajax加載數(shù)據(jù)之后，p標(biāo)簽內(nèi)的內(nèi)容沒有換行，導(dǎo)致布局錯亂，于是嘗試著使用換行樣式，雖然解決了問題，但是并沒有發(fā)現(xiàn)本質(zhì)原因，本質(zhì)在于，我當(dāng)時獲取的數(shù)據(jù)是一長串的數(shù)字，瀏覽器應(yīng)該是對數(shù)字和英文單詞處理方式相近，不會截斷。

先給出各種方式，再具體介紹每一個屬性。

強制不換行

p { white-space:nowrap; }

自動換行

p { word-wrap:break-word; }

強制英文單詞斷行

p { word-break:break-all; }

*注意：設(shè)置強制將英文單詞斷行，需要將行內(nèi)元素設(shè)置為塊級元素。

超出顯示省略號

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

white-space 屬性設(shè)置如何處理元素內(nèi)的空白

normal 默認(rèn)。空白會被瀏覽器忽略。

pre 空白會被瀏覽器保留。其行為方式類似 HTML 中的 pre 標(biāo)簽。

nowrap 文本不會換行，文本會在在同一行上繼續(xù)，直到遇到 br 標(biāo)簽為止。

pre-wrap 保留空白符序列，但是正常地進行換行。

pre-line 合并空白符序列，但是保留換行符。

inherit 規(guī)定應(yīng)該從父元素繼承 white-space 屬性的值。

word-wrap: normal|break-word;

word-wrap 屬性用來標(biāo)明是否允許瀏覽器在單詞內(nèi)進行斷句，這是為了防止當(dāng)一個字符串太長而找不到它的自然斷句點時產(chǎn)生溢出現(xiàn)象。

normal: 只在允許的斷字點換行(瀏覽器保持默認(rèn)處理)

break-word:在長單詞或URL地址內(nèi)部進行換行

word-break: normal|break-all|keep-all;

word-break 屬性用來標(biāo)明怎么樣進行單詞內(nèi)的斷句。

normal：使用瀏覽器默認(rèn)的換行規(guī)則。

break-all:允許再單詞內(nèi)換行

keep-all:只能在半角空格或連字符處換行

舉例看起區(qū)別：

<!doctype html>

<head>

<title>Document</title>

<style>

.word{background:#E4FFE9;width:250px;margin:50px auto;padding:20px;font-family:"microsoft yahei";}

/* 強制不換行 */

.nowrap{white-space:nowrap;}

/* 允許單詞內(nèi)斷句，首先會嘗試挪到下一行，看看下一行的寬度夠不夠，

不夠的話就進行單詞內(nèi)的斷句 */

.breakword{word-wrap: break-word;}

/* 斷句時，不會把長單詞挪到下一行，而是直接進行單詞內(nèi)的斷句 */

.breakAll{word-break:break-all;}

/* 超出部分顯示省略號 */

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

</style>

</head>

<body>

<p class = "nowrap">wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfs</p>

<p class = "breakword">wordwrap:break-word;absavhsafhuafdfbjhfvsalguvfaihui</p>

<p class = "breakAll">wordwrap:break-word;absavhsafhuafdfbjhfvsalguvfaihuivf</p>

<p class = "normal">wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfsa</p>

<p class = "ellipsis">wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfsab</p>

</div>

</body>

</html>

效果如下：

端--輸入框換行，高度自適應(yīng)

最近項目遇到一個說小不小說大不大的問題，輸入框要自動換行，并且高度還得自適應(yīng)，我試了幾種方式，

1.input 輸入，input不能換行，上網(wǎng)查詢了說將css設(shè)為word-break: break-all; word-wrap:break-word;也是無效的。

2.div 設(shè)置contenteditable="true"屬性，這種方法可以實現(xiàn)輸入內(nèi)容自動換行，并且自適應(yīng)高度，但是項目需要光標(biāo)從邊輸入，我試過text-align：right是無效的。所以這種方式也不行。

3.textarea，文本輸入框，想想這個應(yīng)該可以了吧，文本輸入框是可以內(nèi)容自動換行，可是高度怎么都是固定的啊。我還是沒解決。百度吧，終于找到解決辦法啦。

最后遇到一個光標(biāo)在placeholder提示文字上面，解決辦法：#textarea::-webkit-input-placeholder{ padding-right: 4px;}

<!DOCTYPE html>

<html>

<head>

<style>

#textarea {

display: block;

margin:0 auto;

overflow: hidden;

width: 550px;

font-size: 14px;

height: 18px;

line-height: 24px;

padding:2px;

text-align: right;

}

textarea {

outline: 0 none;

border-color: rgba(82, 168, 236, 0.8);

box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);

}

</style>

</head>

<body>

var autoTextarea = function (elem, extra, maxHeight) {

extra = extra || 0;

var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,

isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),

addEvent = function (type, callback) {

elem.addEventListener ?

elem.addEventListener(type, callback, false) :

elem.attachEvent('on' + type, callback);

getStyle = elem.currentStyle ? function (name) {

var val = elem.currentStyle[name];

if (name === 'height' && val.search(/px/i) !== 1) {

var rect = elem.getBoundingClientRect();

return rect.bottom - rect.top -

parseFloat(getStyle('paddingTop')) -

parseFloat(getStyle('paddingBottom')) + 'px';

};

return val;

} : function (name) {

return getComputedStyle(elem, null)[name];

minHeight = parseFloat(getStyle('height'));

elem.style.resize = 'none';

var change = function () {

var scrollTop, height,

padding = 0,

style = elem.style;

if (elem._length === elem.value.length) return;

elem._length = elem.value.length;

if (!isFirefox && !isOpera) {

padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));

};

scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

elem.style.height = minHeight + 'px';

if (elem.scrollHeight > minHeight) {

if (maxHeight && elem.scrollHeight > maxHeight) {

height = maxHeight - padding;

style.overflowY = 'auto';

} else {

height = elem.scrollHeight - padding;

style.overflowY = 'hidden';

};

style.height = height + extra + 'px';

scrollTop += parseInt(style.height) - elem.currHeight;

document.body.scrollTop = scrollTop;

document.documentElement.scrollTop = scrollTop;

elem.currHeight = parseInt(style.height);

};

addEvent('propertychange', change);

addEvent('input', change);

addEvent('focus', change);

change();

};

</script>

var text = document.getElementById("textarea");

autoTextarea(text);// 調(diào)用

</script>

</body>

</html>

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

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

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

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

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

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

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

古詩文文字示例

籌筆驛

拋擲南陽為主憂，北征東討盡良籌。

時來天地皆同力，運去英雄不自由。

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

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

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

（僅為個人自學(xué)的一點點思考，如有錯漏，歡迎留言指正,還有許多的問題呈現(xiàn)，敬請期待～～～）

在線咨詢

上一篇：12.HTML創(chuàng)建和格式化表格
下一篇：HTML <span> 標(biāo)簽

您的項目需求

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

整合營銷服務(wù)商