防止内容水平溢出

Question

在 this codepen Vuetify demo 中，我使用了两列布局。第一列在绿色 <v-alert> 中有一个 <v-list>。如果单击“切换文本”按钮，列表中第一项的标题将在短和长之间切换。

当文字较长时，会溢出<v-alert>并跑到相邻的列

我该如何防止这种情况发生？理想情况下，我希望文本在到达绿色边缘时用省略号截断 <v-alert>，或者如果不可能，则文本在警报中换行。

我试过在文本中添加以下内容class，但它并不能防止溢出

.prevent-overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Answer 1

如果你想让文字不溢出绿色容器，你需要在那里设置溢出。

          <v-alert text color="success" class="prevent-overflow">

将是你的目标。需要明确的是，当您为 div 设置溢出时，包含的项目会设置溢出，您的意思是 - 我希望此 div 内部的内容在超出范围时表现得像这样它。

对于省略号，你需要设置 2 个东西，1 是在标题上添加 text-over: ellipsis，不需要自动换行等等，它只会导致文本下降，除非你就是这样想。第二件事是将 width 设置为直接保存文本的 div。

对于您的快速修复，您可以执行以下操作：

.v-list-item__title {
  width: 20px;
}
.prevent-overflow2 {
  text-overflow: ellipsis;
  
}

Prevent content from overflowing horizontally