在單元格上強制單詞劃分

我在顯示器上使用div：table-cell on以垂直居中該文本，該文本可以是多行。我偶然發現一些單詞可能會變得很長，並且這會使元素的佈局伸展，即使它具有固定的寬度。有沒有辦法打破這個詞與純CSS分開？在單元格上強制單詞劃分

我發現這個詞 - break：break-word在Chrome 34中工作。這正是我想要的。如果一個詞有足夠的空間來打破新的界限，它應該但是如果它被剪輯 - 打破這個詞。但是，這並不在Firefox和IE瀏覽器..

<style> 
    .table { 
    display: table; 
    width: 100px; 
    height: 100px; 
    border: 1px solid #ccc; 
    } 

    .table-cell { 
    vertical-align: middle; 
    display: table-cell; 
    } 
</style> 

<div class="table"> 
    <div class="table-cell">Loremipsumdolorsitamet</div> 
</div>

http://jsfiddle.net/3m6Q2/

來源

2014-05-02 Frinsh

試一下'word-wrap：break-word;' –

您應該使用word-break:break-all;

.table-cell { 
    vertical-align: middle; 
    display: table-cell; 
    word-break:break-all; 
}

jsFiddle example

來源

2014-05-02 15:07:10 j08691

嗯，這個工作方式有點像我想要的，但是隨後它會分解其他可以斷線的單詞。 http://jsfiddle.net/xzaQP/1/ – Frinsh

試試這個

.table-cell{ word-wrap: break-word; 
-ms-word-break: break-all; 
word-break: break-all; 
/* Non standard for webkit */ 
word-break: break-word; 
-webkit-hyphens: auto; 
-moz-hyphens: auto; 
hyphens: auto; 
table-layout: fixed;}

來源

2014-05-02 15:34:55

哇！在添加「display：table; width：100％;」之後，測試Firefox，使用「table-layout：fixed」格式化單個單元格，就像您建議爲我工作的那樣。感謝您讓我走上正軌。（唯一的解決方案，我發現https://bugzilla.mozilla.org/show_bug.cgi?id=587438在網上btw。） – Searle

在單元格上強制單詞劃分

回答

相關問題