0

I'm having trouble with this and it's driving me crazy trying to figure out why it wants to take up the full width.

CodePen

HTML

<div class="api-tile-ribbon-front">
  <div class="api-tile-ribbon-text">
    Finance<a href="#">&nbsp;&#187;</a>
  </div>
</div>

CSS

.api-tile-ribbon-text {
  color: #0C5B85;
  padding-top: 8px;
  display: inline;
  height: 16px;
  margin: 0 5px;
  text-overflow: ellipsis;
  line-height: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.api-tile-ribbon-front {
  position: relative;
  background-image: url("http://i60.tinypic.com/2wn5oi1.jpg");
  background-repeat: repeat-x;
  height: 36px;
  max-width: 95%;
}

I'm using relative position so I can use the :before and :after images and I'm doing a bunch of stuff to truncate text with ellipsis.

Notice that the ribbons will automatically go to the max-width. I'd like the width to be determined by the textual content within. What is causing it to go full width and how can I stop it?

1
  • 1
    any block element, when not floated, will stretch as wide as possible
    – Hugo Silva
    May 6, 2015 at 0:44

1 Answer 1

3

display: inline-block; or float:left on .api-tile-ribbon-front should do what you want.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.