div中的多行文本边框（html / css）

Question

我希望在多行文字周围设置边框，我有：

Morbi hendrerit pretium nibh quis <span style='border: 1px solid black;'>
mattis. Blah blah blah</span> blah blah...

现在，当跨度跨越多行时，边界是围绕每行文本创建的，我不想发生这种情况 - 我的目标是围绕整个块的边框，文本是内联的（ display：block / inline-block不能正常工作。

有没有办法在不玩javascript的情况下实现这一目标？

Answer 1

将整个字符串换行为div并将其设置为display：inline-block。

<div style="border: 1px solid black; display: inline-block">
  Morbi hendrerit pretium nibh quis<br>
  mattis. Blah blah blah blah blah...
</div>

Answer 2

使用<div>代替<span>.它可能会解决问题。

Answer 3

如何使用内联div而不是span？

Morbi hendrerit pretium nibh quis <div class="inline-border"> mattis. 
Blah blah blah</div> blah blah...

和你的CSS

.inline-border {border: 1px solid black;display:inline}