Bootstrap表充滿長未佔用空間的文本

我使用的是Bootstrap，我有一個有幾列的表，其中最後一個有時會有一長段文本沒有空格。我注意到，在某些屏幕尺寸下，表格會溢出其父div，並與其兄弟表格產生醜陋的重疊。Bootstrap表充滿長未佔用空間的文本

我玩過它，我認爲這個問題與文本沒有空格有關。我創建了一個jsfiddle，演示了我的意思。

正如您所看到的，最左上角的表格表現良好，並且只是垂直增長以容納更多文字。然而，左下方的桌子由於長的沒有間隔的文字而導致右邊的溢出，並且左下方的桌子右邊的列被「在」其兄弟之下。

有沒有人有任何提示，我可以如何解決這個問題，以便很長的文本被剪切或部分拆分到一個新的行？

2012-08-30 Richard Bender

109

添加下面的樣式應用到<table>

.the-table { 
    table-layout: fixed; 
    word-wrap: break-word; 
}

然後你願意，你可以通過調整CSS的佈局。

來源

2012-09-04 12:59:02 albertedevigo

只有在閱讀某處的文字包裝被解壓，使用溢流：打破字 – unidha

@unidha我認爲你是錯的。您可以查看[工作草案]（http://www.w3.org/TR/css3-text/）或[編輯草稿]（http://dev.w3.org/csswg/css-text-3 /）。 'over-flow'屬性不存在。我們正在討論的屬性被稱爲「溢出包裝」或「自動換行」作爲備用。你能提供你的來源嗎？ – albertedevigo

我在這裏閱讀http://www.impressivewebs.com/new-css3-text-wrap/ – unidha

這工作不強制表格佈局是固定的只是把它添加到TD或任何

.is-breakable { 
    word-break: break-word; 
}

來源

2016-05-25 08:37:58

好，就這麼簡單。 –

您可以使用下面的CSS。這將包裝文本並在文本的末尾應用...。

例如This_is_a_large_text將改爲This_is_a_lar ...

td { 
    max-width: 120px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
}

您還可以添加工具提示顯示完整的文本值。

<td data-toggle="tooltip" title="${text}">${text}</td>

來源

2017-06-08 08:29:51

我在使用Internet Explorer的這些解決方案時遇到了問題。

我用下面的樣式來最終工作。

<td style="word-break: break-all">

來源

2017-10-01 10:38:33

Bootstrap表充滿長未佔用空間的文本

回答

相關問題