Border around multiline text in div (html / css)

Question

I want to have a border around multi-line text, I have:

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

Now that the range spans more than one line, a border is created around each line of text, which I don’t want - I am aiming at a border around the whole block, and the text is inline (display: block / inline-block do not do the job properly).

Is there any way to achieve this without playing with javascript?

Answer 1

Wrap the entire line 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>. This can solve the problem.

Answer 3

How to use inline div instead of 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}