CODEWITHSUNDEEP
htmlcssoverflowpadding
Paul Henry
Paul Henry

Reputation: 375

CSS overflow not obeying padding

I have a set of HTML elements that I need to style, which I can't change the structure of in any way (yeah, I know).

The HTML has a div that contains two nested spans. The div has padding and the overflow is hidden. The width of the div is set programatically and applied as an inline style.

I would like the text contained within the inner span to be clipped, but still retain the right hand padding as specified on the containing div.

After some research, it appears that the standard approach to this is to use a second nested div but, as I mentioned, I can't change the structure of the HTML.

Currently I have:

<!-- This is what I have to work with (I can't change the structure of this HTML!) -->
<div class="c1" style="width: 100px;">
  <span class="c1-inner">
      <span class="c1-inner-2">
          122333444455555666666777777788888888999999999
      </span>
  </span>
</div>

<!-- This is how I want the HTML above to display -->
<div class="c2" style="width: 100px;">
  <div class="c2-inner">
      122333444455555666666777777788888888999999999
  </div>
</div>

Styled by the following CSS: 

.c1 {
  border: 1px solid red;
  border-radius: 4px;
  background-color: #c0c0c0;
  padding: 0 13px 0 13px;
  overflow: hidden;
}
.c1-inner {
  // No relevant styles here yet
}

.c1-inner-2 {
  // No relevant styles here yet
}


.c2 {
  border: 1px solid red;
  border-radius: 4px;
  background-color: #c0c0c0;
  padding: 0 13px 0 13px;
}

.c2-inner {
  overflow: hidden;
}

A jsFiddle is available here

I need to style the top "button" so that it looks like the second one only using CSS. I have reached the limits of my CSS skills and any help would be very much appreciated.

Upvotes: 2

Views: 359

Answers (1)

Sarhanis
Sarhanis

Reputation: 1587

A simple fix. Most important bit: you can make a span have a display value of block rather than inline, which is its default.

Here's the relevant CSS you need and a working example:

.c1 {
  border: 1px solid red;
  background-color: #c0c0c0;
  padding: 0 13px 0 13px;
}
.c1-inner {
  overflow: hidden;
  display: block;
}

.c2 {
  border: 1px solid red;
  background-color: #c0c0c0;
  padding: 0 13px 0 13px;
}

.c2-inner {
  overflow: hidden;
}
We want this<br>

<!-- This is what i Have to work with -->
<div class="c1" style="width: 100px;">
  <span class="c1-inner">
      <span class="c1-inner-2">
          122333444455555666666777777788888888999999999
      </span>
  </span>
</div>



<!-- This displays how i want the html above to display -->
<br>
to look like this<br>
<div class="c2" style="width: 100px;">
  <div class="c2-inner">
      122333444455555666666777777788888888999999999
  </div>
</div>
<br>
but cannot change the structure of the html!

Upvotes: 2

Related Questions