Question 319182 in Html Question posted in
Some basic documentation can be found here.

Html – How to wrap text inside a background with height?

I need to create text that contains a white background, where this background needs to have a centered height to the text, as in the image below:

enter image description here

This is my code:

body, html{
   background:black;
}

.text-format {
  width: 280px;
  background-color: white;
  padding-left: 40px;
}

.text-format span {
  font-family: 'SimplonBP Bold', Courier, monospace;
  font-size: 70px;
  color: #00d318;
}
<div class="text-format"><span>Stacqé</span></div>

How can I make this possible?

Tags:

4

Answers


  1. 0

    Could you use a black border and set a height on the text-format div, then position the span inside it?

    body, html{
   background: black;
}

.text-format {
  width: 280px;
  height: 35px;
  background-color: white;
  padding-left: 40px;
  border: solid black;
  border-width: 25px 20px;
}

.text-format span {
  font-family: 'SimplonBP Bold', Courier, monospace;
  font-size: 70px;
  color: #00d318;
  display: block;
  position: relative;
  top: -30px;
}
    <div class="text-format"><span>Stacqé</span></div>
    Login or Signup to reply.
  2. 0

    You may decrease line-height and use gradient and background-clip to draw the background-colors:

    example:

    .text-format {
 width:max-content;
  background:linear-gradient(white,white) , linear-gradient(#011700, #011700);
  background-clip:content-box, border-box;
  padding: 20px;
  line-height:0.5;
}

.text-format span {
  font-family: 'Rubik Mono One', monospace;
  padding-left:40px;
  font-size: 70px;
  color: #00d318;
}
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap" rel="stylesheet"> 
<div class="text-format"><span>Stacqé</span></div>
    Login or Signup to reply.
  3. 0

    You could create a pseudo element (::afteror ::before) for the background, combine relative/absolute positions on the different elements and apply according z-index values as demonstrated below.

    Additionally, if you move the font-size property to the rule of the parent element (.text-format), you can use em values for the height and top parameters of the pseudo element, which makes these values relative to the font-size.

    body,
html {
  background: black;
}

.text-format {
  width: 280px;
  padding-left: 40px;
  position: relative;
  font-size: 70px;
}

.text-format span {
  font-family: 'SimplonBP Bold', Courier, monospace;
  color: #00d318;
  position: absolute;
  z-index: 2;
}

.text-format::after {
  content: '';
  position: absolute;
  background-color: white;
  height: 0.5em;
  top: 0.25em;
  left: 0;
  right: 0;
  z-index: 1;
}
    <div class="text-format"><span>Stacqé</span></div>
    Login or Signup to reply.
  4. 0

    Seems like an inset shadow is simple enough.

    .text-format {
  display: inline-block;
  padding-left: 6rem;
  padding-right: 1rem;
  background-color: white;
  box-shadow: inset 0px 0px 0px 1.3rem #000
}

.text-format span {
  font-family: 'SimplonBP Bold', Courier, monospace;
  font-size: 70px;
  font-weight: bold;
  color: #00d318;
}
    <div class="text-format"><span>stacqé</span></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search