title: How to make a break inside <a> tag
body: <p><a href="https://i.stack.imgur.com/ca3WK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ca3WK.png" alt="" /></a></p>
  <p>This is what i want to get</p>
  <p><a href="https://i.stack.imgur.com/urnEi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/urnEi.png" alt="enter image description here" /></a></p>
  <p>This is what i have</p>
  <p><a href="https://i.stack.imgur.com/ImaoL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ImaoL.png" alt="enter image description here" /></a></p>
  <p>This is what happens after i use &quot;&lt;b.r&gt;&quot;</p>
  <p>HERE IS HTML CODE</p>
  <pre><code>    &lt;nav id=&quot;nav1&quot;&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href=&quot;&quot; class=&quot;red&quot;&gt;NAGRODOWY MODEL GRY PZPN&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  </code></pre>
  <p>HERE IS CSS CODE</p>
  <pre><code>#nav1 ul
  {
      display: block;
      margin-left: 32%;
      list-style: none;
  }
  #nav1 li a
  {
      text-align: center;
      padding: 10px 9px 10px 9px;
      color: white;
      font-weight: bold;
      font-size: 11px;
  }
  #nav1 li .red
  {
      background-color: #91191c;
  }
  </code></pre>