Html 避免说分手的话

我的布局（HTML/CSS）有问题。我的话会转到第二行，造成可怕的效果

我在CSS中尝试了

wordbreak:break-word

，但没有成功

我的雇员再培训局

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

问题

---

断字：断字

将根据规则断字不是这个词的一部分

---

您应该使用

wordbreak:keep all

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

.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;
}

---

.

仍然不起作用：（，我尝试将该属性添加到链接/span中，但什么也没做。奇怪。@Gibson我看到#和单词之间有一个空格。这就是原因。看起来空格是个问题，因为空格引入了一个新词。尝试

空格：wrap；

只删除空格即可修复，不需要空格！谢谢

.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;
}