Question

我有这个代码，我正在尝试针对较小的屏幕进行优化： 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%;
}

但是，它都不起作用。我只是希望文本被切断，如果它太长（并且最好显示一个...表示它已被切断），以便图像保持在同一条线上。

＆＃13;

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

＆＃13;

<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>

＆＃13;

隐藏溢出文本在flexbox与白色空间nowrap

0 个答案: