避免分詞

我的佈局有問題（HTML/CSS）。我的話將打破第二線，造成可怕的影響。我試過word-break: break-word在我的CSS，但不起作用。避免分詞

我ERB

<%= link_to tag_path(tag), class: "line-height" do %> 
     <span class="spot_tag"> # <%= "#{tag}" %> </span> 
<% end %>

我的CSS

 .spot_tag { 
    margin-right: 5px; 
    text-shadow: 1px 1px 0px #48b581; 
    color: #ebfff5; 
    border: 1px solid #34c17e; 
    font-weight: 700; 
    text-rendering: optimizeLegibility; 
    background-color: #29cf9a; 
    padding: 5px 10px; 
    border-radius: 35px; 
    font-size: 13px; 
    background: #4be59b; /* Old browsers */ 
}

問題

Prob with tags

來源

2014-09-21 Gibson

word-break: break-word將根據其規則打破單詞。＃不是這個詞的一部分。

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

來源

2014-09-21 09:45:49

仍然不會工作:(我嘗試將該屬性添加到鏈接/跨度並且沒有做任何事情，很奇怪 – Gibson 2014-09-21 09:47:37

@Gibson我發現＃和word之間有一個空格，這就是爲什麼 – 2014-09-21 09:48:41

看起來像是空間是問題 – Gibson 2014-09-21 09:49:11

顯示跨度爲inline-block的。這樣它會粘在一起。

.spot_tag { 
    margin-right: 5px; 
    text-shadow: 1px 1px 0px #48b581; 
    color: #ebfff5; 
    border: 1px solid #34c17e; 
    font-weight: 700; 
    text-rendering: optimizeLegibility; 
    background-color: #29cf9a; 
    padding: 5px 10px; 
    border-radius: 35px; 
    font-size: 13px; 
    background: #4be59b; /* Old browsers */ 
    display: inline-block; 
}

DEMO。

來源

2014-09-21 09:51:13 LinkinTED

回答

相關問題