前端實現div框邊角的鈍化雖然簡單，但是有時候突然想不到，特此寫下幾句實現方法，以便記憶。

　　　　實現div框四個角都鈍角的操作：設置 div ： border-radius=10px;

　　　　實現div框一個角的鈍角效果 ：設置div :border-top-left-radius=10px;

　　　　　　　　　　　　　　　　　 border-top-right-radius=10px;　　

　　　　　　　　　　　　　　　　　 border-bottom-left-radius=10px;

　　　　　　　　　　　　　　　　　 border-bottom-right-radius=10px;

　　　　html實現限制一行字數的顯示，超出的部分用省略號（....）來代替

　　　　　　<div style="width:200px; 
　　　　　　　　　　　　　white-space:nowrap;
            　　　　　　overflow:hidden;
            　　　　　　text-overflow:ellipsis;
            　　　　　　border:1px solid red">
　　　　 　　　　　　試試看試試看試試看試試看試試看試試看試試看試試看試試看試試看試試看
　　　　</div>

　　語法：　　

　　text-overflow : clip | ellipsis　　

　　參數：

　　clip : 　不顯示省略標記（...），而是簡單的裁切（clip這個參數是不常用的！）

　　ellipsis : 　當對象內文本溢出時顯示省略標記（...）

　　說明：　　

　　設置或檢索是否使用一個省略標記（...）標示對象內文本的溢出。

　　請您註意，text-overflow:ellipsis屬性在FF中是沒有效果的。

　　示例：

　　div { text-overflow : clip; }

　　text-overflow是一個比較特殊的樣式，我們可以用它代替我們通常所用的標題截取函數，而且這樣做對搜索引擎更加友好，如：標題文件有50 個漢字，而我們的列表可能只有300px的寬度。如果用標題截取函數，則標題不是完整的，如果我們用CSS樣式text- overflow:ellipsis，輸出的標題是完整的，只是受容器大小的局限不顯示出來罷了。

text-overflow屬性僅是註解，當文本溢出時是否顯示省略標記。並不具備其它的樣式屬性定義。我們想要實現溢出時產生省 略號的效果。還必須定義：強制文本在一行內顯示（white-space:nowrap）及溢出內容為隱藏（overflow:hidden）。只有這樣 才能實現溢出文本顯示省略號的效果。

有的時候的某段文本太長了，會影響整個的布局，很多人用動態語言來解決這個問題，但必須區分中文和英文，因為中文相當於兩個英文字符長度，這樣不僅繁瑣，而且加重了服務器的負擔。其實，我們完全可以使用CSS完美解決這個問題，

<div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1px solid red">試試看試試看試試看試試看試試看試試看試試看試試看試試看試試看試試看</div>

效果：

語法：

text-overflow : clip | ellipsis

參數：

clip : 　不顯示省略標記（...），而是簡單的裁切

（clip這個參數是不常用的！）

ellipsis : 　當對象內文本溢出時顯示省略標記（...）

說明：

設置或檢索是否使用一個省略標記（...）標示對象內文本的溢出。

請您註意，text-overflow:ellipsis屬性在FF中是沒有效果的。

示例：

div { text-overflow : clip; }

text-overflow是一個比較特殊的樣式，我們可以用它代替我們通常所用的標題截取函數，而且這樣做對搜索引擎更加友好，如：標題文件有50 個漢字，而我們的列表可能只有300px的寬度。如果用標題截取函數，則標題不是完整的，如果我們用CSS樣式text- overflow:ellipsis，輸出的標題是完整的，只是受容器大小的局限不顯示出來罷了。

text-overflow屬性僅是註解，當文本溢出時是否顯示省略標記。並不具備其它的樣式屬性定義。我們想要實現溢出時產生省 略號的效果。還必須定義：強制文本在一行內顯示（white-space:nowrap）及溢出內容為隱藏（overflow:hidden）。只有這樣 才能實現溢出文本顯示省略號的效果。

有的時候的某段文本太長了，會影響整個的布局，很多人用動態語言來解決這個問題，但必須區分中文和英文，因為中文相當於兩個英文字符長度，這樣不僅繁瑣，而且加重了服務器的負擔。其實，我們完全可以使用CSS完美解決這個問題，

white-space:nowrap;overflow:hidden;text-overflow:ellipsis;  <!-- 就這三句,,,嘿嘿....->

旅行，寫作，編程

鮮為人知的編程真相

Java 與 .NET 的平臺發展之爭

我的丈夫是個程序員

2013年中國軟件開發者薪資調查報告

科技史上最臭名昭著的13大罪犯

程序員的鄙視鏈

做程序猿的老婆應該註意的一些事情

• 1CSS經典布局之彈性格局
• 2html例證
• 3bootstrap-組件之旋鈕式下拉菜單
• 4div均勻分布代碼範例
• 5相關Node、Element，HTMLCollection、NodeList
• 6CSS/CSS3慣用樣式小結
• 7【HTML】仿淘寶五星評估顯示任何分數
• 8input文本框實現寬度自適應代碼範例，input文本框
• 9Gulp幫你自動搞定coffee跟scss的compile
• 10超市導航代碼

• 上一篇：html form onsubmit函數解釋，input、submit、button的差異
• 下一篇：CSS進度條展示

文章評論

• 1CSS 超出掩藏實現限制字數的功能代碼(多瀏覽器)
• 2CSS 超出隱藏實現限制字數的效能代碼(多瀏覽器)
• 3css 只好顯示兩行 超過顯示點點點
• 4UITextField限制字數步驟
• 5php中怎麽對輸出的文章限制字數，剩余的用“.”表示
• 6fck控件如何限制字數
• 7uitextField限制字數步驟和抖動效果
• 8文本框怎麽實現限制輸入字數效果
• 9【安卓】讓子元素超出容器限制、怎麽實現更靈活的容器布局、
• 1

html實現鈍角效果；html實現限制一行字數的顯示，超出的部分用省略號（....）來代替