Multi-line text border issue with span tag

Question

I've a header text which has a border around it. A larger text has two lines, but the border breaks. So, I applied the CSS style box-decoration-break: clone;. But this separates the text into two different blocks like in the attached screen. Is it possible to display the border completely around the text?

Need to implement like this:

HTML like this;

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

CSS Style applied;

.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

add property display: inline-block;

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

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