1. 程式人生 > >css強制換行、禁止換行、超出隱藏實現

css強制換行、禁止換行、超出隱藏實現

一、強制換行
1 word-break: break-all; 只對英文起作用,以字母作為換行依據。

2 word-wrap: break-word; 只對英文起作用,以單詞作為換行依據。

3 white-space: pre-wrap; 只對中文起作用,強制換行。


word-break:break-all 和 word-wrap:break-word 都是能使其容器如DIV的內容自動換行,它們的區別在於:

1、word-break:break-all 
假設div寬度為450px,它的內容就會到450px自動換行,如果該行末端有個很長的英文單詞,它會把單詞截斷,一部分保持在行尾,另一部分換到下一行。

2、word-wrap:break-word 
例子與上面一樣,但區別就是它會把整個單詞看成一個整體,如果該行末端寬度不夠顯示整個單詞,它會自動把整個單詞放到下一行,而不會把單詞截斷掉。

二、禁止換行 

1 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 
white-space:nowrap; 是禁止換行。
overflow:hidden; 是讓多出的內容隱藏起來,否則多出的內容會撐破容器。
text-overflow:ellipsis; 讓多出的內容以省略號...來表達。但是這個屬性主要用於IE等瀏覽器,Opera瀏覽器用-o-text-overflow:ellipsis; 而Firefox瀏覽器沒有這個功能,多出的內容只能隱藏起來。

相關推薦

css強制禁止超出隱藏實現

一、強制換行 1 word-break: break-all; 只對英文起作用,以字母作為換行依據。 2 word-wrap: break-word; 只對英文起作用,以單詞作為換行依據。 3 white-space: pre-wrap; 只對中文起作用,強制換行。 wor

CSS 強制禁止

強制換行       1、word-break: break-all;       只對英文起作用,以字母作為換行依據。       2、word-wrap: break-word;   只對英文起作用,以單詞作為換行依據。       3、white-space: pre

C#DataGridView交替變色禁止自動排序 列顯示格式設定

程式碼示例: 1、行交替變色 dgvData.RowsDefaultCellStyle.BackColor = Color.WhiteSmoke;// 設定表格背景色 dgvData.AlternatingRowsDefaultCellStyle.BackColor = Color.Whit

HTML,JS禁止滑鼠右鍵禁止全選複製貼上的方法

禁止滑鼠右鍵、禁止全選、複製、貼上; oncontextmenu事件禁用右鍵選單;  js程式碼: document.oncontextmenu = function(){ event.returnValue = false; } // 或者直接返回整個事件 do

HTML,JS禁止滑鼠右鍵禁止全選複製貼上的方法;

禁止滑鼠右鍵、禁止全選、複製、貼上; oncontextmenu事件禁用右鍵選單; js程式碼: document.oncontextmenu = function(){ event.returnValue = false; } // 或者直接返回

Notification(Notification的通知欄常駐各種樣式點選無效禁止滑動刪除相容低版本)

Notification(Notification的通知欄常駐、Notification的各種樣式、Notification點選無效、Notification禁止滑動刪除) Android的Notification是android系統中很重要的一個機制, 產品人員常常利用通

Maven依賴排除禁止依賴傳遞取消依賴的方法

轉自: http://chwshuang.iteye.com/blog/2069937?utm_source=tuicool&utm_medium=referral 大家都知道Maven的優點是依賴管理,特別是前期使用ANT的開發者都有很多感觸。 最

CSS強制英文中文與不 強制英文

字母 psi 省略號 -s 換行 適合 hidden 強制 超出 1. word-break:break-all;只對英文起作用,以字母作為換行依據 2. word-wrap:break-word; 只對英文起作用,以單詞作為換行依據 3. white-space:pre-

CSS強制英文中文與不

代碼 英文 指定 ext 亞洲 tran book 了解 bsp 設計制作HTML時會遇到CSS強制英文、中文換行與不換行的問題,可以通過本文了解一下相關知識。 結構: 1.Transshipment Booking System is launched只對英文起作用,以字

css 強制

pre 瀏覽器 但是 bre space tle inf -o content css強制換行和超出隱藏實現 一、強制換行1 word-break: break-all; 只對英文起作用,以字母作為換行依據。2 word-wrap: break-word;

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

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

[js]純css強制

create pen add ul li ellipsis style tle i++ meta 要加在li上 <!DOCTYPE html> <html lang="en"> <head> <meta

CSS,自動/禁止

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

css 禁止

css換行用省略號代替,也可以說是長標題的文章可以使用簡單的CSS樣式實現省略號控制顯示 程式碼部分: 一般的文字截斷(適用於內聯與塊): ==============CSS================ .text-overflow{ display:block; width:31em;word-bre

CSS強制英文/中文與不

p1{ word-break:break-all; width:150px;}/*只對英文起作用,以字母作為換行依據*/.p2{ word-wrap:break-word; width:150px;}/*--只對英文起作用,以單詞作為換行依據*/.p3{white-spac

CSS 強制,文字溢位顯示省略號~

css一共就三句話: {  white-space: nowrap;    text-overflow:ellipsis;   overflow:hidden; } 註釋: white-space

css相容多瀏覽器強制與不

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

解決 HTML div css 強制

  1、強制不換行,同時以省略號結尾。 <div style="width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;" > 你好朋友朋友朋友我為什麼不能看到效果啊 </

CSS文本空白

不定 自動 web 保留 企業 img 需求 imageview ima 前提:文本的父容器是塊級元素。首先,我們來整理一下與換行有關的3個CSS屬性: word-break 該屬性決定文本內容超出容器時,瀏覽器是否自動插入換行符。 屬性值: normal:默認換行規則

WPF RichTextBox 禁止

log detail ref nta tail class sources bar 自己 原文:WPF RichTextBox 禁止換行 這個問題困擾了好久,進過不斷的努力,