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

Question

I want to have a border around multiline text, I have:

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

Now, when the span spans more than one line, the border is created around each line of text, which I don't want to happen - I am aiming for a border around a whole block, with the text being inline (display:block/inline-block don't do the job properly).

Is there a way of achieving that without playing with javascript?

Answer 1

Wrap the whole string in a div and set it to 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

Use <div> instead of <span>. It might fix the issue.

Answer 3

What about using an inline div instead of a span?

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

and in your CSS

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