自定義中斷字

我正在處理地圖圖例，當字太長時，我遇到了一些麻煩。我想知道是否可以在文本中添加一些屬性，以便打破最後的符號空間，分數，下劃線，斜線和其他標點符號自定義中斷字

換句話說，我希望更多符號被解釋爲空格爲「默認空格breakline」。

我嘗試使用word-wrap: break-word或word-break: break-all但它不是預期的結果......這是我想要的只有當沒有符號，所以我可能會添加其中的1到CSS斷線（順便說一句，我「M不知道的分歧/至極一個使用/爲什麼）

這裏是我想什麼的例子（我試過）

http://jsfiddle.net/uazk54pL/

編輯

順便說一下，

，我沒有使用JavaScript，因爲我認爲它可以與CSS，我不知道如何做到這一點......但我不反對使用它，如果沒有找到更好的解決方案

.tmp { 
 
    border: black 1px solid; 
 
    width: 100px; 
 
    margin: 5px; 
 
} 
 
#wrap { 
 
    word-wrap: break-word; 
 
} 
 
#break { 
 
    word-break: break-all; 
 
} 
 
}

nothing 
 
<div id="nothing" class="tmp"> 
 
    hi im/a-longword 
 
    <br/> 
 
    <br/>breaklineon-and_and and/ 
 
    <br/> 
 
    <br/>ifnosymboliwantwordbreak 
 
</div> 
 
word-wrap: break-word; 
 
<div id="wrap" class="tmp"> 
 
    hi im/a-longword 
 
    <br/> 
 
    <br/>breaklineon-and_and and/ 
 
    <br/> 
 
    <br/>ifnosymboliwantwordbreak 
 
</div> 
 
word-break: break-all; 
 
<div id="break" class="tmp"> 
 
    hi im/a-longword 
 
    <br/> 
 
    <br/>breaklineon-and_and and/ 
 
    <br/> 
 
    <br/>ifnosymboliwantwordbreak 
 
</div> 
 
expected 
 
<div id="expected" class="tmp"> 
 
    hi im/a- 
 
    <br/>longword 
 
    <br/> 
 
    <br/>breaklineon- 
 
    <br/>and_and and/ 
 
    <br/> 
 
    <br/>ifnosymboli 
 
    <br/>wantwordbr 
 
    <br/>eak 
 
</div>

來源

2015-04-17 Luckyn

你可以在你的話加軟斷字標記用''。這有幫助嗎？ – zvona

我正在使用的詞彙是從數據庫導入的，所以很不幸，我認爲我無法在需要的地方添加標記 – Luckyn

其實我認爲問題是如何將「ifnosymboliwantwordbreak」分解爲單詞，我懷疑css是否可以實現這一點。 – Jakehao

我最後使用的方法在問題的意見告訴我們。由於我的文本是用JavaScript添加的，我只是在將特殊字符添加到我的頁面之後添加了一個 。

str.replace(/([-/_])/g,"$&&thinsp;")

而且我用CSS word-wrap:break-word;切詞太長

來源

2015-04-21 07:17:31 Luckyn

-1

我已經在你的榜樣更新CSS。看看，如果這是你想要做的。

http://jsfiddle.net/uazk54pL/1/

的CSS是這樣的：

.tmp { 
    border:black 1px solid; 
    width:100px; 
    margin:5px; 
    position:relative; 
    word-wrap: break-word; 
}

來源

2015-04-17 09:26:31

你可以從他的底部塊看到他想要達到的目標......你沒有改變任何東西。 – Aaron

，我已經嘗試添加word-wrap：break-word屬性...（參見框2） – Luckyn

自定義中斷字

回答

相關問題