潘加西文翻譯
最好 翻譯體式格局是
</div>
keep-all Does not allow word breaking for Chinese, Japanese 翻譯公司 and Korean. Functions the same way as normal for all non-Asian languages. This value is optimized for text that includes small amounts of Chinese 翻譯公司 Japanese 翻譯公司 or Korean.
1、強迫換行：
<div class=c6>
table-layout: fixed;
word-wrap: break-word;
break-all Behaves the same as normal for Asian text 翻譯公司 yet allows the line to break arbitrarily for non-Asian text. This value is suited to Asian text that contains some excerpts of non-Asian text.
中英文混排 翻譯情況 翻譯社Chinese and English. 中英文混排的情況 翻譯社Chinese and English.
.AutoNewline
div {
overflow: hidden; (讓多出來的不顯示。)
中英文混排 翻譯情況。Chinese and English. 中英文混排的環境。Chinese and English.
P.S.若未設定 width ，則超過螢幕畫面最右邊的字才會主動折行囉 翻譯社
<table>
</div>
利用break-word時，是將強迫換行 翻譯社中文沒有任何問題，英文語句也沒問題。然則對於長串的英文，就不起感化。
word-wrap同word-break的區分
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
如果是div層，請用：
</div>
<div class=c1>
這時候您就會發現本來應當超越 width=100 的文字卻主動折到下一行了!
table {
強制英文單詞斷行
div{ word-break:break-all; }
.c7{ width:300px;word-wrap:break-word;overflow:auto; border:1px solid yellow}
normal是默許環境，英文單詞不被拆開。
<div class="c6">
table-layout: fixed;
</table>
</div>
CSS 裡 翻譯 word-break 屬性，將其設為 break-all 即可 翻譯社
</tr>
</div>
.c6{ width:300px;word-break:keep-all; border:1px solid red}
</div>
</tr>
如這2個都不消的話，中文不會出任何問題。英文語句也不會出問題。但是，長串英文會出問題。
word-break: break-all;/*必需*/
以下是引用片斷：
word-wrap:break-word; overflow:hidden;
在 IE 下沒有任何問題，在 FF 下，長串英文會被遮住超出的內容。
中英文混排 翻譯情況。Chinese and English. 中英文混排的情形。Chinese and English.
相容 IE 和 FF 的換行 CSS 推薦樣式
在我們設計網頁的時候，總會遇到一些不愉快 翻譯工作，最多見 翻譯莫過於在後台添加內容後才發現顯示 翻譯頁面被撐開，致使網頁極端不美觀 翻譯社以前大師根基上都是設計 表格，網上天然很多對於的解決方法，現在還有div+css標準設計，很少看到相幹好 翻譯方法，此刻把平時找到的避免表格被撐開的好方式總結歸納一下，和大 家一路分享 翻譯社
<div class=c6>
1.htm
<style>
.c1{ width:300px; border:1px solid red}
.c2{ width:300px;word-wrap:break-word; border:1px solid yellow}
.c3{ width:300px;word-wrap:break-word;word-break:break-all; border:1px solid green}
.c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
.c5{ width:300px;word-break:break-all; border:1px solid black}
.c6{ width:300px;word-break:keep-all; border:1px solid red}
.c7{ width:300px;word-wrap:break-word;overflow:auto; border:1px solid yellow}
</style>
.c1{ width:300px; border:1px solid red}
<div class="c1">asdasd
</div>
<div class=c1>
This is all English. This is all English. This is all English.
</div>
<div class=c1>
word-break: break-all;
中英文混排 翻譯情況。Chinese and English. 中英文混排的環境。Chinese and English.
=========彌補=================================
<div class=c3>
normal Default. Content exceeds the boundaries of its container.
}
</div>
最後總結一下最適用的代碼：
<div class=c7>
其 中 max-width:600px; 在IE7、FireFox等其他非IE瀏覽器下最大寬度為600px，但在IE6中無效；width:600px; 在所有瀏覽器中圖片的巨細為600px，當圖片巨細大於600px，主動縮小為600px，在IE6中有用；而 overflow:hidden; 指將超越設置大小的部份隱藏，避免節制圖片巨細失敗而引起的表格撐開變形 翻譯社
</div>
|
</div>
.c5{ width:300px;word-break:break-all; border:1px solid black} <div class=c3>
即英文單詞應不該該被斷開那？那問題很明明了，明顯不該該被斷開了。
word-wrap:break-word;overflow:auto;在ie下沒有任何問題。在ff下，長串會被遮住部分內容。
<br> keep-all，是指Chinese 翻譯公司 Japanese 翻譯公司 and Korean不息詞。即只用此時，不消word-wrap，中文就不會換行了。（英文語句正常。） 主動換行
div{ word-wrap: break-word; word-break: normal; }
而不是
以下是援用片斷：
word-wrap:break-word; overflow:auto;
<br>
</div> 在 我們設計網頁的時刻，總會碰到一些不愉快的工作，最多見的莫過於在後台添加內容後才發現顯示的頁面被撐開，致使網頁極端不美觀 翻譯社以前人人根基上都是設計表 格，網上自然很多對於的解決方法，現在還有div+css標準設計，很少看到相關好的方式，此刻把日常平凡找到的避免表格被撐開 翻譯好方法總結歸納一下，和人人 一路分享 翻譯社 今朝首要 翻譯問題存在於 長串英文 和 英文單詞被斷開 翻譯社其實長串英文就是一個對照長的單詞而已。
全是中文的環境。滿是中文的環境 翻譯社滿是中文的環境。
<div class="c4">
</div> <div class=c4> <div class=c7>
This is all English. This is all English. This is all English.
總結如下： <div class="c3"> <br> ff下：
|
而不是word- wrap:break-word;word-break:break-all;。
<div class="c2">
ie下： table-layout: fixed;
</div> normal Default. Allows line breaking within words. 彷佛是只對Asian text起感化。
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj </div> 利用word-wrap:break-word;所有 翻譯都正常。
This is all English. This is all English. This is all English. word-break: max-width: 600px; break-word是節制是否斷詞的。
另:
word-wrap:break-word;
是用來強迫截斷英文單字而換行 翻譯社 <div class=c2> <tr>
"word-wrap:"是節制換行的。
word-break: keep-all;/*必需*/
table { <div class="c5"> .c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
全是中文的環境 翻譯社全是中文的環境 翻譯社全是中文的環境 翻譯社
word-wrap:break-word;
}
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div> <div class=c7>
以下是援用片段：
word-wrap:break-word; word-break:break-all;
<td class="AutoNewline">主動換行主動換行主動換行主動換行自動換行主動換行主動換行主動換行自動換行主動換行主動換行主動換行主動換行主動換行主動換行主動換行主動換行主動換行主動換行主動換行主動換行自動換行主動換行自動換行</td>
所以，綜上，最好 翻譯體例是word-wrap:break-word;overflow:hidden;
</div> </div> <div class=c5>
</div>
<td class="NoNewline">不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行</td>
我們可以針對表格的屬性來限制大小避免被撐開，
比如在裡添加代碼「style="table-layout:fixed;word-wrap:break-word; word-break;break-all;"」，
此中「table-layout:fixed; 」是為了將表格佈局固定住，就能夠有效地避免表格被撐開，
「word-wrap:break-word; 」是節制換行的，也就是強制履行換行，這個在文本內容較多 翻譯情況下需要利用到，希奇是反複 翻譯內容呈現，不履行換行的話，表格就被撐開了；
而「word- break: break-all; 」可以解決IE的框架被英文（非亞洲說話文本行）撐開 翻譯問題，
然則不會強迫換行，只顯示表格寬度裡的內容。
一般情況下只要用到 「style="table-layout:fixed;word-wrap:break-word;"」就能夠 翻譯社固然，上面調用的語句可以界說在css 裡，好比
break-word Content wraps to next line, and a word-break occurs when necessary. 必要時會觸發word-break。
This is all English. This is all English. This is all English. This is all English. This is all English. This is all English. <div class=c5> <div class=c6> <br>
2、強制不換行： <tr>
} word-wrap: 對於長串英文，就是歹意 翻譯工具，自然不消去管了。可是，也要想些法子，不讓它把容器撐大。
}
.c2{ width:300px;word-wrap:break-word; border:1px solid yellow} 用css節制圖片自順應巨細，代碼如： .c3{ width:300px;word-wrap:break-word;word-break:break-all; border:1px solid green}
img { </div> safjaskflasjfklsajfklasjflksajflksjflkasjfksafj 滿是中文的情況。滿是中文的情形。滿是中文的環境。
用：overflow:auto; ie下，長串會主動折行。ff下，長串會被遮蓋。
</div> {
中英文混排的環境。Chinese and English. 中英文混排的情形。Chinese and English.
<div class=c3>
FM:http://superwow.pixnet.net/blog/post/42353146-css-%E9%98%B2%E6%AD%A2%E8%A1%A8%E6%A0%BC%E8%A2%AB%E5%85%A7%E5%AE%B9%E6%92%90%E9%96%8B }
</div>
中英文混排 翻譯情況 翻譯社Chinese and English. 中英文混排的情形 翻譯社Chinese and English.
|
}
<br> <div class=c4> </div> <div class=c4> </div>
人人都知道陸續 翻譯英文或數字能是容器被撐大，不克不及憑據容器 翻譯巨細主動換行，下面是 CSS若何將他們換行的方式！
對於div
1.（IE流覽器）white-space:normal; word-break:break-all;這裏前者是遵守標準 翻譯社
#wrap{white-space:normal; width:200px; }
或
#wrap{word-break:break-all;width:200px;}
eg.
<div id="wrap">ddd1111111111111111111111111111111111</div>
效果：可以實現換行
2.（Firefox流覽器）white-space:normal; word-break:break-all;overflow:hidden;一樣的FF下也沒有很好的實現方式，只能潛藏或加捲軸，固然不加捲軸結果更好！
#wrap{white-space:normal; width:200px; overflow:auto;}
或
#wrap{word-break:break-all;width:200px; overflow:auto; }
eg.
<div id="wrap">ddd1111111111111111111111111111111111111111</div>
結果：容器正常，內包庇藏
對於table
1. (IE流覽器)利用樣式table-layout:fixed；
eg.
<style>
.tb{table-layout:fixed}
</style>
<table class="tbl" width="80">
<tr>
<td>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
結果：可以換行
2.(IE流覽器)利用樣式table-layout:fixed與nowrap
eg.
<style>
.tb {table-layout:fixed}
</style>
<table class="tb" width="80">
<tr>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
結果：可以換行
3. (IE流覽器)在利用百分比固定td巨細情況下利用樣式table-layout:fixed與nowrap
<style>
.tb{table-layout:fixed}
</style>
<table class="tb" width=80>
<tr>
<td width=25% nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
效果：兩個td均正常換行
3.(Firefox流覽器)在使用百分比固定td巨細情況下利用樣式table-layout:fixed與nowrap,而且利用div
eg.
<style>
.tb {table-layout:fixed}
.td {overflow:hidden;}
</style>
<table class=tb width=80>
<tr>
<td width=25% class=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
<td class=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
</tr>
</table>
這裏單格寬度一定要用百分比定義
結果：正常顯示，但不能換行（注：在FF下還沒有能使容器內容換行的好方式，只能用。-> 翻譯社|,-> 翻譯公司|的-> 翻譯overflow將多出的內包庇藏，以避免影響整體效果）
為領會決長串英文，一般用word-wrap:break-word;word-break:break-all;。但是，此體例會導致，通俗 的英文語句中 翻譯單詞會被斷開（ie下也是） 翻譯社 <div class="c7"> This is all English. This is all English. This is all English.
.NoNewline
{
break-all，是斷開單詞。在單詞到邊界時，下個字母主動到下一行。首要解決了長串英文的問題。
 Example Source Code [mid.lt263.com/mb]<style type="text/css"> 避免表格被撐開或div層被撐開 翻譯方法 </style>
</style> 強迫不換行
div{ white-space:nowrap; } 若是是表格，請用： </div> 中英文混排 翻譯環境。Chinese and English. 中英文混排的情況。Chinese and English. 滿是中文 翻譯情形。滿是中文的情況。滿是中文的情形 翻譯社
全是中文的情形。滿是中文 翻譯情形。滿是中文 翻譯環境。
另，測試代碼以下： </div> <br> <div class=c2>
</table>
<div class=c5> <div class=c2>
width:expression(this.width > 600 ? "600px" : this.width); overflow:hidden;
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
**************彌補************************
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
width: 加上寬度;
|
<table>
===========================================================
滿是中文 翻譯情形。滿是中文的情形。滿是中文的環境。 </div> 也不是
********此段為參考，尚未試過************
滿是中文的情況。滿是中文的情形。全是中文的環境 翻譯社 </div>
Example Source Code [mid.lt263.com/mb]<style type="text/css"> This is all English. This is all English. This is all English. 來自: http://blog.xuite.net/s925517/mylife/85386335-%5BCSS%5D%E5%BC%B7%E5%88%B6HTML%E8%A1%A8%E6%A0%BC%E5%8有關翻譯的問題歡迎諮詢天成翻譯社 | |
留言列表
