带有span标记的多行文本边框问题

Question

我有一个标题文字，旁边有一个边框。较大的文本有两行，但边框断开。所以，我应用了CSS样式box-decoration-break: clone;。但是这会将文本分成两个不同的块，就像在附加的屏幕中一样。是否可以在文本周围完全显示边框？

需要像这样实施;

像这样的HTML;

<span class="border-title">LOREM IPSUM DUMMY CONTENT LOREM IPSUM DUMMY CONTENT</span>

应用了CSS样式;

.border-title {
    color: #264755;
    text-transform: uppercase;    
    font-size: 24px;
    border: 1px solid #3CADCA;    
    padding: 10px 20px 5px;    
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

Answer 1

添加属性display: inline-block;

＆＃13;

＆＃13;

.border-title {
 border: 1px solid blue;
 display: inline-block;
}

＆＃13;

<div style="max-width: 300px;"><span class="border-title">LOREM IPSUM DUMMY CONTENT LOREM IPSUM DUMMY CONTENT</span></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您不想使用@ buxbeatz帖子中的div max-width，您可以添加 display:block;到你的CSS，它应该是好的。

.border-title {
    color: #264755;
    text-transform: uppercase;    
    font-size: 24px;
    border: 1px solid #3CADCA;    
    padding: 10px 20px 5px;    
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    display:block;
}

<span class="border-title">LOREM IPSUM DUMMY CONTENT LOREM IPSUM DUMMY CONTENT</span>