Question

我有这样的事情：

<div>
  <span>
    text text text text text text
  </span>
</div>

div{
  width:100px;
  border: 1px solid black;
  line-height: 12px;
  height: 16px;
  position: relative;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

span{
  position: absolute;
  overflow: hidden; 
  text-overflow: ellipsis;
}

省略号不起作用。我不一定需要使用position：absolute，但结果我应该有文本，不扩展div和截断宽度省略号。

P.S。 div的宽度包含在样本中，实际上div宽度未知。

Answer 1

尝试将width: 100%添加到span：

＆＃13;

div{
  width:100px;
  border: 1px solid black;
  line-height: 12px;
  height: 16px;
  position: relative;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

span{
  position: absolute;
  width: 100%;
  overflow: hidden; 
  text-overflow: ellipsis;
}

＆＃13;

<div>
  <span>
    text text text text text text
  </span>
</div>

＆＃13;

Answer 2

我不知道你为什么需要span标记的绝对位置，但这并不重要。

Span标签应该有“width”css-rule来解决你的问题。以你的例子：

span {
   width:100%;
}

因此，每次要使用overflow:ellipsis选项时，都必须指定目标元素的宽度。

Answer 3

text-overflow: ellipsis;会影响文本没有足够的空间。

＆＃13;

div {
	width: 100px;
	border: 1px solid black;
	line-height: 12px;
	height: 16px;
}
span {
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	white-space: nowrap;
}

＆＃13;

<div>
  <span>
    text text text text text text
  </span>
</div>

＆＃13;

CSS。不起作用的文本溢出：省略号

3 个答案: