Title in two lines. How best to implement?

Question

css

What do you think is more acceptable for H1 in two lines?
The first option is to use the <br> and <span> tags for wrapping in the title itself. But then it can turn out to be porridge. The second option is to generally use a separate div for the second row. In this case, the title will be incomplete, which is not good for search engines.
Maybe there are other solutions?

Answer 1

<h1>Петя курит мамбу <small>много курит</small></h1>

+ css to it and everyone is happy, including search engines

Answer 2

https://jsfiddle.net/Ivanq/y7kn197L/1/

Answer 3

As an option, you can make a wrapper and limit its width or apply restrictions to the h1 itself. I heard the < br > tag is not recommended, but it's just a rumor)
here is an example: codepen.io/Profiteer/pen/qbbgBp

Answer 4

<div class="name"><h1>Две строки</h1>один заголовок</div>
<code lang="css">
.name{
  text-align:right;
  line-height: 7px;
  width: 50%;
}
</code>