CSS自動(dòng)換行、強(qiáng)制不換行、強(qiáng)制斷行、超出顯示省略號(hào)

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

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

強(qiáng)制不換行

p { white-space:nowrap; }

自動(dòng)換行

p { word-wrap:break-word; }

強(qiáng)制英文單詞斷行

p { word-break:break-all; }

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

超出顯示省略號(hào)

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

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

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 屬性的值。

word-wrap: normal|break-word;

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

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

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

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

word-break 屬性用來標(biāo)明怎么樣進(jìn)行單詞內(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";}

/* 強(qiáng)制不換行 */

.nowrap{white-space:nowrap;}

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

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

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

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

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

/* 超出部分顯示省略號(hào) */

.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)

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

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

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

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

最后遇到一個(gè)光標(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>

、結(jié)構(gòu)

一、標(biāo)記<Html> 建立HTML文檔

<Head> 設(shè)置網(wǎng)頁頭部和其它信息

<Body> 設(shè)計(jì)文件格式及內(nèi)文所在<Body> 元素的屬性

Text 設(shè)置頁面文字的送顔色 Bgcolor 設(shè)置頁面背景的顡色

Background 設(shè)置頁面的背景圖像 Link設(shè)置頁面黙認(rèn)的顔色

Bgproperties 設(shè)置頁面的背景圖像為固定，不隨頁面的滾動(dòng)而滾動(dòng)

Alink 設(shè)置鼠標(biāo)正在單擊時(shí)候的鏈接顔色 Vlink 設(shè)置訪問過后的鏈接顔色

Topmargin 設(shè)置頁面的上邊距 Leftmargin 設(shè)置頁面的左邊距

二、頭部

標(biāo)記 <Base> 當(dāng)前文檔的URL全稱 <Title>設(shè)置顯示在瀏覽器在上方的標(biāo)題內(nèi)容

<Isindex> 表明該文檔是一個(gè)可用于檢索的網(wǎng)關(guān)腳本

<Meta> 有關(guān)文檔本身的信息，例如用于查詢的關(guān)鍵詞，用于獲取該文檔的有效期等

<Style> 設(shè)置CSS層疊樣式表的內(nèi)容

<Mate> 標(biāo)記屬性

Http-Equiv 生成一個(gè)HTTP標(biāo)題域，它的取值與另一個(gè)屬性相同，

例如Http-Equiv=Expires，實(shí)際取值由Content確定

Name 如果元數(shù)據(jù)是以關(guān)鍵字/取值的形式出現(xiàn)的，Name 表示鍵字,

如Author或ID

Content 關(guān)鍵字/取值的內(nèi)容

三、文字

文字標(biāo)記 <HNumber>……<1HNumber> Number=1.2.3.4.5.6

分別指1至6級(jí)標(biāo)題

<Font>文字

文字的修飾標(biāo)記 <B>/<strong> 粗體 <I>/<Em>/<cite> 斜體

<Sup>上標(biāo) <sub>下標(biāo) <Big>大字號(hào) <small>小字號(hào)

<U>下劃線 <S>/<strike>刪除線 <Address>地址

<Tt>打字機(jī)文字 <Blink>閃爍文字（只適用于Netscape瀏覽器）

<Code>/<samp>等寬 <kbd>鍵盤輸入文字 <Var>聲明變量

<Fant>標(biāo)記的屬性

Face 字體 Size字號(hào) Color顔色

四.列表

列表標(biāo)記 <Ul>無序列表 <Ol>有序列表 <Dir>回錄列表 <Dl>定義列表

<Meru>菜單列表 <Dt>·<Dd>定義列表的標(biāo)記 <Li>列表項(xiàng)目的標(biāo)記

<Ul><Ol>標(biāo)記的屬性 Type設(shè)置列表類型 start設(shè)置列表起始屬性

Type的屬性值 1 數(shù)字 a 小寫字母 A 大寫字母 i小寫羅馬數(shù)字

I 大寫羅馬數(shù)字 Disc ● Circle ○ square □

五.鏈接

鏈接標(biāo)記 <A> 鏈接

<A>標(biāo)記的屬性 Href 指定鏈接地址 Name給鏈接命名

Title設(shè)置鏈接提示文字 Target指定鏈接的目標(biāo)窗口

Target屬性值 -parent在上一級(jí)窗口中打開。一般使用分幀的框架頁會(huì)經(jīng)常使用

-bank在新窗口中打開

-self在同一個(gè)幀或窗口中打開.這項(xiàng)一般不用設(shè)置

Href屬性值 http:// 進(jìn)入萬維網(wǎng)站點(diǎn) news://啟動(dòng)新聞?dòng)懻?/p>

ftp:// 進(jìn)入文件傳輸服務(wù)器 mailto:// 啟動(dòng)新聞?dòng)懻摻M

telnet:// 啟動(dòng)telnet方式 gopher://訪問一個(gè)gopher服務(wù)器

六.圖片

圖片標(biāo)記 <Img>圖片 <Map>圖像映射 <Area>圖像映射中定義區(qū)域

<lmg>標(biāo)記的屬性 src圖像的源文件 Alt提示文字 Width寬度

Height高度 Vspace垂直間距 Hspace水平間距 Align排列 Border邊框

Align屬性值 Top文字的中間線居于圖片上方 Middle文字的中間線居于圖片中間

Bottom文字的中間線居于圖片底部 Left 圖片在文字的左側(cè)

Right圖片在文字的右側(cè) Absbottom文字的底線居于圖片底部

Absmiddle文字的底線居于圖片中間 Baseline英文文字基線對(duì)齊

Texttop英文文字上邊線對(duì)齊

Shape屬性值

Rect矩形區(qū)域 Circle橢圓形區(qū)域 Poly多邊形區(qū)域

七.表格

1.表格標(biāo)記 <Table>…</Table>表格標(biāo)記 <Tr>…</Tr>行標(biāo)記

<Td>…</Td>單元格標(biāo)記 <Th>表頭標(biāo)記

<Table>標(biāo)記屬性 Bordercolor 表格邊框色 Borde表格邊框的寬度

Bordercolorlight 表格邊框亮邊框色（左上邊框顔色）

Bordercolordark 表格暗邊框色（右下邊框顔色）

Bordercolor 行的邊框顔色 Width表格的寬度 Height表格的高度

Bgcolor表格的背景顔色 Background表格的背圖像

<Tr>標(biāo)記屬性 Align行內(nèi)容的水平對(duì)齊 Valign 行內(nèi)容的垂直對(duì)齊

Bgcolor 行的背景顔色 Background 行的背景圖像

Bordercolor 行的邊框顔色 Bordercolorlight 行的亮邊框顔色

Bordercolordark 行的暗邊框顔色

<Td>標(biāo)記屬性 Align單元內(nèi)容的水平對(duì)齊 Valign單元格內(nèi)容的垂直對(duì)齊

Bgcolor 單元格的背景顔色 Background 單元格的背景圖像

Bordercolor單元格的背景顔色 Bordercorlorlight單元格的亮邊框顔色

Brodercolordark 單元格的暗邊框顔色 Width 單元格的寬度

Height單元格的高度

<Th>標(biāo)記屬性 Align表頭內(nèi)容的水平對(duì)齊 Valign表頭內(nèi)容的垂直對(duì)齊

Bgcolor 表頭的背景顔色 Background表頭的背景圖像

Bordercolor表頭的邊框顔色 Bordercolorlight 表頭的亮邊框顔色

Bordercolordark 表頭的暗邊框顔色 Width 表頭的寬度 Height 表頭的高度

八.表單

1.表單標(biāo)記 <Form>表單標(biāo)記 <Input>表單輸入標(biāo)記

<select>菜單和列表標(biāo)記 <Option>菜單和列表項(xiàng)目標(biāo)記

2.屬性 <Form> Name表單的名稱

Method 定義表單結(jié)果從瀏覽器傳送到服務(wù)器的方法，一般有兩種方法：get,post

Action 用來定義表單處理程序（一個(gè)Asp,CGI等程序）的位置（相對(duì)地址或絕對(duì)地址）

<lnput>標(biāo)記屬性 Name 域的名稱 Type域的類型

Maxlength 域的最大輸入字符數(shù) size域的寬度 Value 域的默認(rèn)值

<Select>標(biāo)記屬性 Name 菜單和列表的名稱 size 顯示的選項(xiàng)數(shù)目

Multiple 列表中的項(xiàng)目多選 Value 選項(xiàng)值 selected默認(rèn)選項(xiàng)

<Texrarea>標(biāo)記屬性 Name 文字域的名稱 Rows文字域的行數(shù)

Cols 文字域的列數(shù) Value 文字域的默認(rèn)值

Type屬性值 Text 文字域 Password 密碼域 File 文件域

Checkbox復(fù)選框 Redio單選框 Button普通按扭

Submit 提交按鈕 Reset重置按鈕 Hidden隱藏域Image圖像域

九.滾動(dòng)

滾動(dòng)標(biāo)記 <Marquee>

<Marquee>標(biāo)記屬性 Direction 滾動(dòng)方向 up 文字向上滾動(dòng) Left文字向左滾動(dòng)

Behavior 滾動(dòng)方式 Scroll 循環(huán)往復(fù)

Side 只做一次滾動(dòng)

Alternate 交替進(jìn)行滾動(dòng)

ScrollAmount 滾動(dòng)速度

ScrollDelay 滾動(dòng)延遲

Trim函數(shù)用來剔除首尾空格

十.框架

1.標(biāo)記 <Frameset> 框架邊框標(biāo)記 <Frame> 框架標(biāo)記 <Iframe>浮動(dòng)框架標(biāo)記

<Frameset>標(biāo)記屬性 Cols列 Rows行

<Frame> 標(biāo)記屬性 src框架中顯示頁面源文件的路徑

FrameBorder 框架邊框顯標(biāo)屬性 FrameSpacing框架邊框?qū)挾葘傩?/p>

Scrolling框架滾動(dòng)條顯示屬性 NoResize 框架尺寸調(diào)整屬性

BorderColor 框架邊框顔色屬性 MarginWidt 框架邊框緣寬度屬性

MarginHerght框架邊緣高度屬性

<1frame> 標(biāo)記屬性 src浮動(dòng)框架中顯示頁面源文件的路徑

Width 浮動(dòng)框架的寬度 Height 浮動(dòng)框架的高度

Name 浮動(dòng)框架的名稱

Align 浮動(dòng)框架的排列方式 Left表示居左 Center表示居中 Right表示居右

FrameBorder 框架邊框顯示屬性 FrameSpacing 框架寬度屬性

Scrolling 框架滾動(dòng)條顯示屬性 ( yes顯示 No不顯示 Auto根據(jù)頁面的長度自動(dòng)判斷是否晶粒示滾動(dòng)條

NoResize 框架尺寸調(diào)整屬性 BorderColor框架的顔色

MarginWidth 框架邊緣寬度屬性 MarginHeight 框架邊緣高度屬性

插入刷新

步驟：1.選擇"查看/文件頭內(nèi)容"

2.在插入面板上，打開HTML選項(xiàng)卡

優(yōu)化代碼

打開文件窗口，執(zhí)行"命令、清理HTML"命令

文本換行：Enter 行距較大

Enter + Shift 行距較小

插入水平線設(shè)置顔色：單擊屬性面板中的快捷標(biāo)簽編輯器按鈕

在代碼中鍵入"color = #顔色值"

當(dāng)圖像無法顯示時(shí)將顯示這段文字：

圖像屬性中的替代→輸入文字

插入鼠標(biāo)經(jīng)過圖像:準(zhǔn)備兩張圖像

在文件窗口中，將光標(biāo)放置于需要翻轉(zhuǎn)圖像位置→插入工具欄中單擊鼠標(biāo)經(jīng)過圖像

Ⅱ.使用導(dǎo)航條：

在"常用"對(duì)象組中，單擊"圖像"小三角→導(dǎo)航條

插入圖像占位符：圖像小三角→圖像占位符

Flash動(dòng)畫的背景實(shí)現(xiàn)透明參數(shù)wmode 值 transparent

插入 Java Applet

插入表單

插入表單域：對(duì)象面板上"表單"→插入表單

插入文本域：單擊面板上的插入文本域. 初始值 = 打開時(shí)顯于的文字

插入密碼框：在屬性面板上選擇密碼

插入多行文本域：在類型后選擇多行

插入隱藏域：對(duì)象面板→插入隱藏域

插入按鈕：標(biāo)簽用來設(shè)置按鈕上顯示的文本

插入圖像提交按鈕=圖像域：

插入文件上傳按鈕=文件域：

插入單選框

插入單選按鈕組：Label文字說明 Value 單選按鈕的值

插入復(fù)選框

菜單/插入列表：列表值→

插入跳轉(zhuǎn)菜單：(

制作網(wǎng)頁鏈接

URL統(tǒng)一資源定位器

目標(biāo)：_blank在一個(gè)新的未命名的瀏覽器窗口中打開

_parent如果是嵌套的框架，鏈接會(huì)在父框架或窗口中打開，否則=_top

_top在完整的瀏覽器中打開

創(chuàng)建搜索頁

運(yùn)行中輸入:

Inetmgr (IIS

Odbcad32 (odbc

Asp對(duì)象

Applicatipn 在給定的應(yīng)用程序的所有用戶間共享信息,并在服務(wù)器運(yùn)行期間持久地保存數(shù)據(jù)。

集合： Contents

staticObjects

Item（變量值）=設(shè)置資料變量的值

Key（變量名稱）=設(shè)置資料變量的名稱

Count（變量資料的數(shù)量）=表示

Coutents集合中資料的總數(shù)量

方法： Lock

Unlock

事件： Applicatipn_Onstart

Application_OnEnd

Session 存儲(chǔ)特定的用戶會(huì)話所需的信息

屬性：CodePage

LCID

SessionID

Timeout

集合：Contents

StaticObjects

方法：Abandon

事件：Session_Onstart

Session_OnEnd

Response 用來控制發(fā)送給用戶的信息，包括直接發(fā)送信息給瀏覽器，重定位瀏覽器到另一個(gè)URL或設(shè)置Cookie值

屬性： Buffer

CacheControl

Charset

ContentType

Expires

ExpiresAbsolute

IsClientConnected

PICS

Status

集合： Cookies

方法： AddHeader

AppendToLog

BinaryWrite

Clear

End

Flush

Redirect

Write

Request 訪問任何基于HTTP請(qǐng)求傳遞的信息，常見的有從HTML表單用Post方法或Get方法傳遞的參數(shù)，Cookie或用戶認(rèn)證等。

屬性： TotalBytes

集合： ClientCertificate

Form

QueryString

ServerVaiables

方法： BinaryRead

Server 提供對(duì)服務(wù)器方法和屬性的訪問

屬性： ScriptTimeout

集合：無

方法： CreatObject

HTMLEncode

MapPath

URLEncode

Recordset

MoveNext 將前數(shù)據(jù)記錄移至下一條

MovePrevious 將當(dāng)前數(shù)據(jù)記錄移至上一條

MoveFirst 將當(dāng)前數(shù)據(jù)記錄移至第一條

MoveLast 將當(dāng)前數(shù)據(jù)記錄移至最后一條

AbsolutePosition=N 將當(dāng)前數(shù)據(jù)記錄移至第N條

EOF 當(dāng)前數(shù)據(jù)記錄是否移過了最后一條（發(fā)生于向下移動(dòng)時(shí)）

BOF 當(dāng)前數(shù)據(jù)記錄是否移過了第一條（發(fā)生于向上移動(dòng)時(shí)）

VBScript 運(yùn)算符

算術(shù)運(yùn)算符

指數(shù) 取負(fù) 乘法除法加法減法取模連接整數(shù)除法

∧ － * ／ ﹢ ﹣ Mod & \

比較運(yùn)算符

相等不相等小于大于小于或等于大于或等于對(duì)象相象

= <> < > <= >= IS

邏輯運(yùn)算符

邏輯非邏輯與邏輯或異或邏輯等于邏輯蘊(yùn)含

Not And Or Xor Eqv Imp

在線咨詢

上一篇：HTML 編輯器
下一篇：一文講解HTML標(biāo)題標(biāo)記

您的項(xiàng)目需求

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

整合營銷服務(wù)商

CSS自動(dòng)換行、強(qiáng)制不換行、強(qiáng)制斷行、超出顯示省略號(hào)

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

您的項(xiàng)目需求