如何使省略号与显示柔性配合使用

Question

我不知道为什么这个简单的 CSS 不起作用......

.app{
  position: relative;
  background-color: #eae9ea;
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 7px;
  font-weight: 500;
}
.test{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
  border: 1px solid navy;
  min-width: 0;
}

<div class="app">
  <div class="test">Test Test Test Test Test Test  </div>
</div>

我希望省略号与属性一起使用

display:flex

我训练了minwidth = 0但它不起作用

Answer 1

你可以在.test上尝试一下

.test{
    ...
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; /* This property will keep text only in 1 line  */
    word-break: break-all; /* You can try this if you want to break word as well */
 }