CSS制动线但不是字

Question

我有一个问题，我无法修复线刹。 span span元素内的文本 刹车线在这个词的中间。检查第一张图片。

我想要做的是一个单词结束时要刹车的线。 检查示例：

任何想法？

当前的html：

<div class="hgroup">
   <h1 class="fancy-title">
     <span>Leisure &amp; Entertainment</span>
   </h1>
</div>

目前的css：

.hgroup{width:200px !important; float: left !important; margin-left:0px !important; display: inline-block !important; } .hgroup .fancy-title { margin-left: 0px !important; display} .hgroup .fancy-title span{-webkit-text-fill-color:#444 !important;}

Answer 1

将white-space设置为break-all会得到一个结果，就像在没有破坏这个词的演示中一样。

＆＃13;

＆＃13;

   .test { 
    white-space:break-all;
    
    width:130px; 
    background:yellow
}

＆＃13;

<div class="test">Leisure & Entertainment</div>

＆＃13;

＆＃13;

＆＃13;