一个容器div,弹性布局，里面有多个div,div里有文字，如何让容器div超出显示省略号

要让容器 `div` 超出显示并省略号，可以使用以下 CSS 样式：

.container {
  display: flex; /* 使用弹性布局 */
  overflow: hidden; /* 隐藏溢出部分 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  white-space: nowrap; /* 不换行 */
}

这里使用了 `text-overflow: ellipsis` 让超出部分显示省略号，同时也需要将 `white-space` 设置为 `nowrap`，防止文本换行。另外，为了让容器 `div` 能够超出显示，还需要将其宽度设置为一个固定值或一个百分比值。

如果是多个子元素 `div` 中的文本超出部分需要省略号，可以在子元素上设置 `overflow: hidden` 和 `text-overflow: ellipsis`，如下所示：

.container {
  display: flex; /* 使用弹性布局 */
  overflow: hidden; /* 隐藏溢出部分 */
  white-space: nowrap; /* 不换行 */
}

.child {
  overflow: hidden; /* 隐藏溢出部分 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

这样设置之后，当子元素中的文本超出部分时，就会被隐藏并显示省略号。

相关问题

一个高度固定的div里面有好几个p标签 当p标签过多超出div的高度时 让最后一个p标签显示为省略号 超出div的不显示

可以通过设置 `overflow: hidden` 和 `text-overflow: ellipsis` 来实现最后一个p标签显示为省略号。具体步骤如下：

1. 设置 div 的高度和 overflow 属性，使其只显示固定高度内的内容，超出部分隐藏。

div {
  height: 100px; /* 设置div的高度 */
  overflow: hidden; /* 超出部分隐藏 */
}

2. 取消 p 标签的 margin 和 padding，避免影响布局。

p {
  margin: 0;
  padding: 0;
}

3. 设置所有 p 标签的高度，并且让最后一个 p 标签高度为 0。

p {
  height: 30px; /* 设置所有p标签的高度 */
}

p:last-child {
  height: 0; /* 让最后一个p标签高度为0 */
}

4. 使用 text-overflow 和 white-space 属性来实现最后一个 p 标签的省略号效果。

p:last-child {
  white-space: nowrap; /* 禁止文本换行 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  overflow: hidden; /* 超出部分隐藏 */
}

完整的CSS代码如下：

div {
  height: 100px;
  overflow: hidden;
}

p {
  margin: 0;
  padding: 0;
  height: 30px;
}

p:last-child {
  height: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

元素div 里面嵌套多个span元素，div如何实现一行展示，超出省略号显示

你可以在CSS文件中为div设置以下样式：

div {
    display: flex; /*将div设置为弹性盒子*/
    flex-wrap: nowrap; /*禁止换行*/
    overflow: hidden; /*超出部分隐藏*/
    text-overflow: ellipsis; /*显示省略号*/
}

span {
    white-space: nowrap; /*禁止span内文本换行*/
}

这样，div内的多个span元素就可以一行展示，并且超出部分会显示省略号。