html - 避免言语分手

Question

我的布局 (HTML/CSS) 有问题。我的话会中断到第二行，从而产生可怕的效果。

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

我的再培训局

 <%= 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

将跨度显示为内联 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 .