避免分手的话

Question

我的布局有问题（HTML / CSS）。我的话会突破到第二行，造成可怕的影响。

我在CSS中尝试了word-break: break-word但是没有用。

我的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 */
}

问题

Answer 1

将范围显示为内联块。这样它就会粘在一起。

.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

Answer 2

word-break: break-word会根据他们的规则打破单词。 ＃不是单词的一部分。

您应该使用word-break:keep-all