1. 程式人生 > >css 多行文字換行

css 多行文字換行

每次做專案 都能碰到文字換行 尤其是標題和名稱 ,都得百度一下,今天特意記下來
今天主題是超長英文文字自動換行word-wrap的使用,在介紹這個屬性的同時,我還把word-break和white-space兩個屬性一起放進來介紹,因為這幾個屬性常給我平時的製作中帶來混淆的感覺,搞不清楚在什麼地帶需要使用中word-wrap屬性,什麼時候又應該使用word-break屬性,而又何時才能使用white-space。為了解決這個疑問,今天特意將他們放在本文中一起介紹。著作權歸作者所有。
原文: http://www.w3cplus.com/content/css3-word-wrap © w3cplus.com

word-wrap 允許長單詞換行到下一行

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

這裡寫圖片描述

語法:

word-wrap: normal|break-word;

normal 只在允許的斷字點換行(瀏覽器保持預設處理)。
break-word 在長單詞或 URL 地址內部進行換行。

word-break:normal | break-all | keep-all
1、normal為預設值,如果設定為預設值時中文則到邊界處的漢字換行,如果是英文整個單詞換行,如果出現某個單詞長度過長,則會撐破容器,如果邊框為固定屬性,則後面部分將無法顯示;

2、break-all:可以強行截斷英文單詞,達到詞內換行效果

3、keep-all:不允許字斷開。如果是中文將把前後標點符號內的一個漢字短語整個換行,英文單詞也整個換行,如果出現某個英文字元長度超過邊界,則後面的部分將撐破容器,如果邊框為固定屬性,則後面部分無法顯示

針對上面幾個不同取值我們來看看例項

相關推薦

css 文字

每次做專案 都能碰到文字換行 尤其是標題和名稱 ,都得百度一下,今天特意記下來 今天主題是超長英文文字自動換行word-wrap的使用,在介紹這個屬性的同時,我還把word-break和white-space兩個屬性一起放進來介紹,因為這幾個屬性常給我平時的製

css DIV中文字顯示

區別 white-space:normal; word-break:break-all; word-wrap:break-word; 新增上上邊的三句就可以換行 這三句重點在於:word-break與word-wrap a:word-break 屬性規定自

C# Textbox 文字

C#中,Windows 窗體的TextBox顯示多行文字,要將它的Multiline屬性設定為true。 每次使用AppendText函式增加一行文字,使其換行的常用做法是: 在字串末尾加 "\r\n"。 正式的用法是: "abc" + Environment.NewL

CSS文字加省略號

文字換行的後需要對超出的內容加省略號,text-overflow: ellipsis 無法實現此需求 更多精彩 更多技術部落格,請移步 asing1elife’s blog 解決 overflow: hidden; // 只有webkit核心瀏

CSS中強制ul li中的文字

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh

css相容瀏覽器強制與不

相容多瀏覽器強制換行與不換行 強制不換行,多餘的部分用省略 overflow:hidden;white-space:nowrap;text-overflow:ellipsis; 1. word-break:break-all;只對英文起作用,以字母作為換行依據 2.

Cocos2d-x 更改文字風格 ( cocos2dx change line )

pad 限制長度 != inline detail _id 興趣研究 end sans Cocos2dx change line在 cocos2dx change line 的實現中,我們能夠簡單的使用 dimensions屬性控制換行。使用它僅僅需將相應的參數值傳入構造

textarea placeholder文字

line 設置 div span text 技術分享 源代碼 tor unicode 要實現這樣的效果 第一反應是直接在placeholder屬性值裏輸入\n換行,如: <textarea rows="5" cols="50" placeholder="1

div寬度固定,將其中的文字,並動態獲取div的高

rip title oat clas 獲取 pre jquery logs -c <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&

echarts x軸文字顯示

mat rownumber false 管控 ffffff style slab 社交 知識                   xAxis : [ {

小程序---canvas畫圖,生成分享圖片,畫圖文字

return 指正 png ttext def fun context lte ctx 小程序目前只支持轉發,不支持分享朋友圈,為了能實現分享,很多線上小程序通過生成分享圖片,保存到相冊來給用戶增加分享的可能。 具體思路及簡要代碼如下: 一:canvas畫圖 draw

css強制html不 css強制英文單詞斷 重拾丟失的

題解 bsp break 換行 強制 建議 特性 問題解決 設置 css強制html不換行 css強制英文單詞斷行 強制不換行 div{ white-space:nowrap; } 自動換行 div{ word-wrap: b

css - 單詞的自動問題

文檔 一行 強制換行 但是 orm url break word 方案 轉載自:解決文檔中有url鏈接時被強制換行的問題 問題 當行內出現很長的英文單詞或者url的時候,會出現自動換行的問題,為了美化頁面,往往會希望這些很長的英文單詞或者url能夠斷開來,超出的部分換行到下

canvas之文字

當canvas的寬度不夠寬時,canvas不會自動換行,可以用下面的程式碼處理 <body> <canvas id="canvas" width="200" height="200" style="background:pink;"></canvas>

p標籤中的文字

參考文章 word-break:break-all和word-wrap:break-word的區別 CSS自動換行、強制不換行、強制斷行、超出顯示省略號 屬性介紹 white-space: 如何處理元素中的空白 normal: 預設, 被瀏覽器忽略空白 pre: 空白被瀏覽器保

微信小程式實現View子節點每固定顯示數目,出來自動

需求是這樣的: 需要根據後臺傳入的資料動態生成view控制元件,固定每行展示三個,多出來的自動換行。 如果用js來寫想必比較簡單,由於接觸微信小程式時間不算太長,對於前端的一些寫法難免運用不是很熟練。 這是我的目錄結構: 相關的思路我已經在程

文字、字母以及數字的問題總結

實現頁面的文字、字母的展示效果的時候,相信大家都會遇到過一些這樣的要求:“文字不能換行,要強制文字一行展示”或者是“字母不會自動換行,需要實現可以自動換行斷句”等等諸如此類的要求,現在就這個文字、字母換不換行的問題,說說這三個css屬性的巧妙運用:white-s

css

強制不換行   1 2 3 4 5 6 7 8 9 div{     white-space:nowrap; }   /*自動換行*/ div{     

CSS,自動/禁止

CSS控制:自動換行/禁止換行 程式碼展示: <style type="text/css"> *{margin:0;padding:0;} body{ font:12px/20px Tahoma, Geneva, sans-serif;pad

RichTextBox文字

RichTextBox顯示多行文字就得把它的Multiline屬性設定為true。 直接加一個換行符"\n": RichTextBox1.Text = "First Line\nSecond Line\nThird Line"; 顯示的結果(沒有換行)為"First LineSecond L