避免分词

我的布局有问题（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

回答

相关问题