Question

我遇到了麻烦，这让我疯狂地想弄清楚为什么要占据全宽。

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%;
}

我使用相对位置，因此我可以使用:before和:after图像，并且我正在做一堆东西来截断带有省略号的文本。

请注意，色带将自动转到最大宽度。我希望宽度由内部的文本内容决定。是什么导致它全宽，我该如何阻止它呢？

Answer 1

<head>
    ...
    <%= stylesheet_link_tag( 'http://fonts.googleapis.com/css?family=Merriweather' ) %>
    ...
</head>

上的display: inline-block;或float:left应该做你想做的事。

使div只与文本内容一样宽

1 个答案: