CSS：如何在內包裹沒有空白的文本？

我用：CSS：如何在內包裹沒有空白的文本？

word-break:break-all; 
table-layout:fixed

和文字環繞在Chrome而不是Firefox瀏覽器。

更新：我決定改變設計，所以它不需要包裝;試圖理清一個CSS修正/黑客事實證明太令人沮喪和耗時。

來源

2010-07-14 FunLovinCoder

聖潔的耶穌......我忘了在表格中添加'table-layout：fixed'，所以我沒有得到理想的行爲。你的問題救了我！ ; D – 2014-10-21 18:01:42

設置td標記的列寬。

來源

2010-07-14 14:53:34

使用CSS3 word-wrap: break-word;。同樣適用於基於WebKit的瀏覽器（Safari，Chrome）。

更新：我忘了，有問題的元素必須隱式或顯式地定位爲固定元素或顯示爲塊元素。對於表格單元格（td），請使用display: inline-block;。

來源

2010-07-14 14:57:15 BalusC

也試過這個，但在Firefox 3.6.6 – FunLovinCoder 2010-07-14 15:10:23

我沒有爲我工作我試了兩個（分別），但不幸的是他們搞糟表格格式非常糟糕。 – FunLovinCoder 2010-07-14 15:30:16

我的不好，使用'display：inline-block;'。 – BalusC 2010-07-14 15:44:49

這樣做的一個有點駭人的方法是通過處理文本在每個字母之間添加空格。用 替換空格然後使用letter-spacing css屬性將空格向下。

我知道，這是一個黑客......但如果沒有別的工作，它應該包裹沒有問題。

來源

2010-07-14 18:04:59 Armstrongest

這太hacky了，干擾正確的索引，很難實現它應該不是一個答案:-) – Capsule 2015-11-02 01:51:17

您可以手動注入零寬度空格（&＃8203;）以創建斷點。

來源

2010-07-15 08:35:36 kingjeffrey

還有一個非標準的HTML標記''[for「word break」]。這裏是瀏覽器對這個和''解決方案的支持：http：//www.quirksmode.org/oddsandends/wbr.html – kingjeffrey 2010-07-15 08:41:10

我認爲這是Firefox中一個長期存在的問題，它回到了Mozilla和Netscape。我敢打賭，你遇到了顯示長URL的問題。我認爲這是渲染引擎的問題，而不是你可以用CSS修復的問題，沒有一些醜陋的黑客。

有意義改變設計。

這看起來雖然樂觀：http://hacks.mozilla.org/2009/06/word-wrap/

來源

2010-07-17 11:40:49 dunxd

142

試試這個，我覺得這會爲類似「AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGG」工作會產生

AARRRRRRRRRRRRRRRRRRRR 
RRGGGGGGGGGGGGGGGGGGGG 
G

我採取從幾個不同的網站在谷歌我的榜樣。我已經在FF 5.0測試此，IE 8.0和Chrome 10.

.wrapword{ 
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */ 
white-space: -webkit-pre-wrap; /*Chrome & Safari */ 
white-space: -pre-wrap;  /* Opera 4-6 */ 
white-space: -o-pre-wrap; /* Opera 7 */ 
white-space: pre-wrap;  /* css-3 */ 
word-wrap: break-word;  /* Internet Explorer 5.5+ */ 
word-break: break-all; 
white-space: normal; 
} 

<table style="table-layout:fixed; width:400px"> 
    <tr> 
     <td class="wrapword"> 
     </td> 
    </tr> 
</table>

來源

2011-02-24 17:39:41 Stirling

enx brad。你的回答得到了我的問題 – SyntaxError 2013-01-31 06:31:52

哎唷！即使在不需要的情況下，這也會強制任意點打破任何單詞。有沒有一種解決方法，只有在需要不超過容器寬度的情況下才能使用這些中斷字？也就是說，如果它不是越野車，就應該首先使用「文字包裝：斷線」的方式工作。 – matteo 2013-06-14 16:20:01

這應該是標記正確的答案。太糟糕的OP死亡。 – Pamela 2013-07-28 19:42:44

對於自動錶佈局嘗試樣式有關TD組合的屬性最大寬度和自動換行。

例如：<td style="max-width:175px; word-wrap:break-word;"> ... </td>

測試在Firefox 32，鉻37和IE11。

來源

2014-09-04 15:41:34 XDM

我不明白爲什麼，但它*只*與'max-width'一起使用，而不是與'寬度'。儘管如此，對我來說卻是最好的解決方案，因爲它不會在任意點分解文字。 – Raziel 2018-01-11 09:13:04

我使用的角度爲我的項目，並設法用一個簡單的過濾器來解決這個問題：

模板：

<td>{{string | wordBreak}}</td>

篩選：

app.filter('wordBreak', function() { 
    return function(string) { 
     return string.replace(/(.{1})/g, '$1'); 
    } 
})

你看不到它，但$1後有一個不可見的空間（謝謝@kingjeffrey的提示），這使得表格單元格的分詞。

來源

2017-01-17 15:38:56

這是OP問的高級版本。

有時，會發生什麼事情呢，我們的客戶希望我們在文字中斷後給予' - '以結束行。

像

AAAAAAAAAAAAAAAAAAAAAAABBBBBBBBBBB

突破到

AAAAAAAAAAAAAAAAAAAAAAA- 
BBBBBBBBB

因此，有如果支持的話，通常是在最新的瀏覽器都支持新的CSS屬性。

.dont-break-out { 

    /* These are technically the same, but use both */ 
    overflow-wrap: break-word; 
    word-wrap: break-word; 

    -ms-word-break: break-all; 
    /* This is the dangerous one in WebKit, as it breaks things wherever */ 
    word-break: break-all; 
    /* Instead use this non-standard one: */ 
    word-break: break-word; 

    /* Adds a hyphen where the word breaks, if supported (No Blink) */ 
    -ms-hyphens: auto; 
    -moz-hyphens: auto; 
    -webkit-hyphens: auto; 
    hyphens: auto; 

}

我正在使用這一個。

我希望有人會有這樣的需求。

來源

2017-02-10 05:42:46 rahulsm

CSS：如何在​​內包裹沒有空白的文本？

回答

相關問題

CSS：如何在內包裹沒有空白的文本？