未調整之前：客戶信息顯示不全

?

調整后實現效果：

?

?補充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瀏覽器沒有這個功能，多出的內容只能隱藏起來。

?補充：http://blog.csdn.net/shangs2010/article/details/7075164

轉載于:https://www.cnblogs.com/hellojesson/p/7736646.html

總結

以上是生活随笔為你收集整理的odoo开发笔记：前端显示强制换行的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。