div文本溢出就显示...

当元素的内容超过其容器的宽度或高度时，文本溢出就会发生。为了解决这个问题，可以使用CSS的text-overflow属性来显示省略号(...)。

text-overflow属性有以下几个值可选：
1. clip：内容会被剪裁，超出部分不可见。
2. ellipsis：超出部分会以省略号(...)表示。
3. initial：使用浏览器的默认值。
4. inherit：继承父元素的属性值。

当text-overflow属性设置为ellipsis时，文本溢出时会显示省略号。但要注意，该属性只对于具有限定宽度的元素才有效。所以在使用时，需要为元素设置宽度，并且还需设置overflow属性为hidden，以便隐藏超出部分的内容。

例如，可以通过以下CSS代码实现div内容溢出显示省略号的效果：
div {
width: 200px;
white-space: nowrap; // 文本不换行
overflow: hidden; // 超出部分隐藏
text-overflow: ellipsis; // 超出部分以省略号显示
}

这样设置后，当div中的文本长度超过200像素时，超出部分就会显示为省略号，从而保持内容的整洁和美观。

需要注意的是，text-overflow属性只对单行文本有效，多行文本溢出需要借助JavaScript或其他技术进行处理。

相关问题

echarts树状图 文本设置宽高溢出隐藏...

要设置echarts树状图中文本的宽高，并且实现溢出隐藏，可以通过以下步骤实现：

1. 在echarts的series中设置label的normal属性，例如：

series: [
  {
    type: 'tree',
    data: [...],
    label: {
      normal: {
        show: true,
        width: 100, // 设置标签宽度
        height: 20, // 设置标签高度
        overflow: 'hidden', // 设置溢出隐藏
      }
    },
    ...
  }
]

2. 在label的formatter回调函数中添加css样式，例如：

label: {
  normal: {
    show: true,
    width: 100,
    height: 20,
    overflow: 'hidden',
    formatter: function(params) {
      return '<div style="width: 100px; height: 20px; overflow: hidden">' + params.name + '</div>';
    }
  }
}

这样就可以设置echarts树状图中的文本宽高，并且实现溢出隐藏。需要注意的是，这种方式会将文本内容包裹在一个div元素中，并且需要手动设置div的宽高和溢出隐藏属性，因此在设置label的width和height属性时需要保证其与div元素的宽高一致。

css控制文字超出内容显示...（-webkit-line-clamp 多行文字溢出...兼容火狐ie浏览器）...

要实现文字溢出的控制，可以使用CSS的text-overflow属性。使用text-overflow属性可以控制当文本溢出容器时如何显示这段文本。其中，常用的属性值有：

1. clip：直接裁剪文本，不显示省略号。
2. ellipsis：溢出部分以省略号代替。

同时，还需要设置overflow属性为hidden，这样才能实现控制文本溢出的效果。

例如，要实现单行文本溢出时显示省略号，可以使用以下CSS代码：

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

如果要实现多行文本溢出时显示省略号，可以使用-webkit-line-clamp属性。但是，-webkit-line-clamp属性只对WebKit内核的浏览器有效，因此需要结合其他属性来实现兼容性。

例如，以下代码可以实现多行文本溢出时显示省略号，并兼容Firefox和IE浏览器：

div {
  display: -webkit-box; /* 将元素设置为弹性伸缩盒子 */
  -webkit-box-orient: vertical; /* 设置盒子内元素垂直排列 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  -webkit-line-clamp: 2; /* 设置最多显示两行 */
  /* 兼容Firefox和IE浏览器 */
  display: -moz-box;
  -moz-box-orient: vertical;
  display: box;
  box-orient: vertical;
}