CSS overflow not obeying padding

Question

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.

Sarhanis · Accepted Answer · 2016-02-16 23:34:04Z

2

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!

answered Feb 16, 2016 at 23:34

Sarhanis

1,5851 gold badge12 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Paul Henry Over a year ago

Thank you. Works exactly as requested... any chance you know how to clip the text in the span at the end of the last full character... (not super important, but worth asking)

Sarhanis Over a year ago

I think that would be impossible if you don't have static content... and even if you do have static content, different computers and fonts and browsers would make that even more complicated.

Collectives™ on Stack Overflow

CSS overflow not obeying padding

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related