Question

我正在尝试使用3个跨度来制作一个div，其中中间的一个应该“压缩”，即当div的大小很小时剪切额外的文本。

我正在寻找的结果是

A Very lon... A
          ^ here it should get cut with "text-overflow: ellipsis;"

不知何故text-overflow: ellipsis;未应用于范围。

知道我缺少什么吗？

尝试使用width，display，overflow，似乎没有任何效果......测试了Chrome和Firefox。

div {
  border-radius: 5px;
  border: 1px solid #333;
  padding: 10px 20px;
  width: 100px;
}

div span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

#long-text {
  width: 20px;
}

<div>
  <span>A</span>
  <span id="long-text">Very long text here....</span>
  <span>A</span>
</div>

Answer 1

span是一个内联元素。它没有宽度或高度。请为display:inline-block元素尝试span。然后text-overflow: ellipsis;将起作用

＆＃13;

div {
  border-radius: 5px;
  border: 1px solid #333;
  padding: 10px 20px;
  width: 100px;
}

div span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display:inline-block;
}

#long-text {
  width: 50px;
}

＆＃13;

<div>
    <span>A</span>
    <span id="long-text">Very long text here....</span>
    <span>A</span>
</div>

＆＃13;

Answer 2

您缺少的是提供跨度块显示

div {
  border-radius: 5px;
  border: 1px solid #333;
  padding: 10px 20px;
  width: 100px;
}

div span {
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

#long-text {
  width: 20px;
}

<div>
  <span>A</span>
  <span id="long-text">Very long text here....</span>
  <span>A</span>
</div>

Answer 3

如XYZ所说span是一个内联元素。并且您需要将其显示属性更改为阻止或内联阻止，具体取决于所需的效果。在你的情况下它将是

#long-text{
display: inline-block
width: 35px;
}

Answer 4

<div>
    <span>A</span>
    <span id="long-text">Very long text here......</span>
    <span>A</span>
</div>

@RequestMapping("/foo")
public Foo[] getFoo() {
    List<Foo> list = new ArrayList<>();
    list.add(new Foo("bar"));
    list.add(new Foo("baz"));
    list.add(new Foo("bat"));
    return list.toArray(new Foo[list.size()]);
}

Answer 5

将填充更改为边距。

margin会在对象外部提供空格，而padding会在内部提供空格。如果文本溢出仍在填充内

，则不会将其视为外部

span元素中的文本溢出不会切割元素宽度之外的texta

5 个答案: