0

我有这段代码，我正在尝试针对较小的屏幕进行优化： https ://codepen.io/anon/pen/PKmdeb?editors=1100

如您所见，它在桌面上运行良好（当窗口很大时）并且图像的高度都相同。但是，当您尝试将窗口一直向右缩小时，迈阿密戴德县将被推到第二行。我有这个：

.city-suggestions-suggestion {
    flex-basis: 50%;
}

意思是我希望每行有 2 张图像。如您所见，波士顿和芝加哥在同一条线上。这是因为他们的名字较短，但洛杉矶-长滩（一个较长的名字）将迈阿密排挤出去。我试图添加这个CSS：

.city-suggestions-suggestion-city {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
}

但是，这些都不起作用。我只想在文本太长时将其截断（最好显示一个 ... 表示它已被截断），以便图像保持在同一行。

.city-suggestions {
  display: flex;
  flex-wrap: wrap;
  padding: 9px;
}

.city-suggestions-suggestion {
  flex-basis: 50%;
}

.city-suggestions-suggestion-wrapper {
  cursor: pointer;
  min-width: 0px;
}

.city-suggestions-suggestion-city {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.city-suggestions-suggestion-img {
  max-width: 100%;
}

.city-suggestions-suggestion-txt {
  text-align: center;
  background-color: @trueblue;
  color: @white;
  padding: 9px 0;
}


}

}
<div class="city-suggestions" data-reactid="517">
  <div class="city-suggestions-suggestion" data-reactid="518">
    <div class="city-suggestions-suggestion-wrapper" data-reactid="519">
      <img class="city-suggestions-suggestion-img" role="presentation" src="http://jonvilma.com/images/apple-16.jpg" data-reactid="520">
      <div class="city-suggestions-suggestion-txt" data-reactid="521">
        <div class="city-suggestions-suggestion-city" data-reactid="522">Boston</div>
      </div>
    </div>
  </div>

  <div class="city-suggestions-suggestion" data-reactid="530">
    <div class="city-suggestions-suggestion-wrapper" data-reactid="531">
      <img class="city-suggestions-suggestion-img" role="presentation" src="http://jonvilma.com/images/apple-16.jpg" data-reactid="532">
      <div class="city-suggestions-suggestion-txt" data-reactid="533">
        <div class="city-suggestions-suggestion-city" data-reactid="534">Chicago</div>
      </div>
    </div>
  </div>

  <div class="city-suggestions-suggestion" data-reactid="542">
    <div class="city-suggestions-suggestion-wrapper" data-reactid="543">
      <img class="city-suggestions-suggestion-img" role="presentation" src="http://jonvilma.com/images/apple-16.jpg" data-reactid="544">
      <div class="city-suggestions-suggestion-txt" data-reactid="545">
        <div class="city-suggestions-suggestion-city" data-reactid="546">Los Angeles-Long Beach</div>
      </div>
    </div>
  </div>

  <div class="city-suggestions-suggestion" data-reactid="554">
    <div class="city-suggestions-suggestion-wrapper" data-reactid="555">
      <img class="city-suggestions-suggestion-img" role="presentation" src="http://jonvilma.com/images/apple-16.jpg" data-reactid="556">
      <div class="city-suggestions-suggestion-txt" data-reactid="557">
        <div class="city-suggestions-suggestion-city" data-reactid="558">Miami-Dade County</div>
      </div>
    </div>
  </div>

4

0 回答 0