CODEWITHSUNDEEP
htmlcsspadding
OhMad
OhMad

Reputation: 7289

CSS - Padding on the left side of a span that wraps around

I have this simple html mockup:

<div class="grey wrap-text">
    <div id="content">
      <span contenteditable="true">
        <span class="bg">this is some text that that wraps around when there is too much text</span>
      </span>
    </div>
  </div>

It produces this result:

enter image description here

CSS:

.bg {
  background-color: black;
  opacity: 0.8;
  padding: 30px 20px 30px 30px;
}

.wrap-text {
  color: white;
  line-height: 130px;
  text-align: right;
  margin: 0 auto;
  font-size: 60px;
  padding: 0px 100px 0px 600px;
}

Ofc, this behaviour is not a bug or anything, it simply wraps around without adding any left padding on the next line.

But is there a way I can have the same padding on the left of the 'is' as before the 'this' whenever the text in the span wraps around?

Alternatively, how could one can the mockup to achieve this effect?

Thanks!

Upvotes: 3

Views: 1759

Answers (3)

lexiexiexi
lexiexiexi

Reputation: 181

If you remove the padding on the wrap-text class, it should remove the wonky spacing caused by the spans and too much padding.

You can force this (although its a little hacky) using a box-shadow to add space on the left and right of the lines instead of left and right padding. Here's a great article from CSS Tricks about box-shadows.

.bg {
  background-color: black;
  opacity: 0.8;
  padding: 30px 0;
  box-shadow: 20px 0 0 black, -20px 0 0 black;
}

.wrap-text {
  color: white;
  line-height: 130px;
  text-align: right;
  margin: 0 auto;
  font-size: 60px;
/*   padding: 0px 100px 0px 600px;
   */}
<div class="grey wrap-text">
    <div id="content">
      <span contenteditable="true">
        <span class="bg">this is some text that that wraps around when there is too much text</span>
      </span>
    </div>
  </div>

Upvotes: 1

Sreekanth Reddy Balne
Sreekanth Reddy Balne

Reputation: 3424

display: inline-block on .bg does the trick.

Problems with inline elements

span is an inline element. Properties like padding, margin, width and height to inline elements are only partially applied.

So, here, when you apply padding to span, which is an inline element, which means that the element is staying inline and not wrapping around. But in your image I can see that it got wrapped around because of unavailable space on the same line(inline). Hence as usual the padding is applied to the starting of the element and not below, because it is inline and not a block.

Hope this helps.

.grey{
  background:#ddd;
}
.bg{
	padding-left:20px;
	display:inline-block;
  font-size:30px;
}
.abg{
  background:red;
}
<div class="grey">
    <div id="content" >
      <span contenteditable="true">
        <span class="bg">
          <span class='abg'>this is some text that that wraps around when there is too much text
          </span>
         </span>
      </span>
    </div>
  </div>

And you can use inline-block on a span. No worries.

Upvotes: 0

Zoilo Reyes
Zoilo Reyes

Reputation: 573

Use the box shadow method 

.bg {
  color: white;
  background-color: black;
  opacity: 0.8;
  padding: 30px 0px 30px 0px;
  box-shadow: 30px 0 0 black, -30px 0 0 black;
  line-height: 100px;
  
}
<div class="grey">
    <div id="content" class='container'>
      <span contenteditable="true" class='container'>
        <span class="bg">this is some teeeeeeeeeeeext that wraps around when there is tooasdfasdfasd much text</span>
      </span>
    </div>
  </div>

Upvotes: 2

Related Questions