css3，超长文本显示省略号不生效

Question

我想在右侧的文本超过150px的时候，显示省略号，但是我这样设置没有显示省略号，是哪里设置不正确吗？

Answer 1

text-overflow属性是不可以被继承的，所以如果要其生效，需要写在其直接父元素上text-overflow是针对文字的CSS样式，所以如果它所在的元素内没有文字（元素内直接写的文字，并非任何子元素内的文字），它是不会生效的。另外，这个CSS样式是通过判断溢出给文字最后加上省略号的，所以需要告诉它怎样才算溢出。所以在使用这个样式的元素上需要设定宽度（有时候也要设定高度，如果不强制不换行的话）。所以你这个问题就很明显了，.user的元素内没有直接的文字，你的文本在.user-info里，所以宽度设定需要给user-info加上。另外，如果不是强制不换行的话，也需要加上高度，告诉CSS什么才算是“文本溢出”。