CODEWITHSUNDEEP
htmlcss
Paul Thomson
Paul Thomson

Reputation: 115

OUTSIDE border only to text which spans multiple lines

How to achieve an outside border only on text of any length which could span multiple lines, must be responsive.

Looking for styling similar to below image.

enter image description here

This is what I've tried so far, struggling with top border and responsiveness over screen sizes and using various font sizes, the best I've got, might be going about this all wrong though:

http://www.cssdesk.com/7nxBa

Making text smaller shows overlapping right border, making text LARGER shows top border...

smaller text

larger text

Upvotes: 2

Views: 771

Answers (1)

Paul Thomson
Paul Thomson

Reputation: 115

I found the 'outline' css attribute which seems to work perfectly for my needs.

.container {
  font: 3rem sans-serif;
  font-weight: bold;
  text-transform: uppercase;

}
  
.highlight {
  display: inline;
  background: #fff;
  color: #000; 
  padding: 5px 10px;
  -webkit-box-decoration-break: clone;
  -ms-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
    outline: 0.4rem solid #000;
}

html,body {
  background: #ccc;
  text-align: left;
  padding: 3%;
}
<body>
  <div class="container">
    <p class="highlight">
      I think I cracked<br>
      it<br>
      using the 'outline' css property, seems to do the trick
      ;-)
    </p>
  </div>
</body>

Upvotes: 1

Related Questions