代码之家  ›  专栏  ›  技术社区  ›  Patrick Pirzer

带显示类型表的标签中的CSS剪切文本溢出

  •  1
  • Patrick Pirzer  · 技术社区  · 6 年前

    我们正在使用HTML5和CSS开发网页。

    我们的每一个标签都有一个以像素为单位的定义长度,有时我们得到的标签的内容和标签一样长。

    所以我们希望内容被一个类似于溢出的样式剪切:每个示例都是隐藏的。 同时,我们发现,如果标签具有显示类型block或inline block,它就可以工作,但这与我们不匹配,因为我们需要显示类型“table”。

    但是,当我们像下面的例子一样使用“table”时,标签会被放大,因此它适合于内容。 有了display.inline-block,它就可以工作了。

    有没有办法让它也能和“display:table”一起使用?

    <label id="40369" style="display: table; width: 260px; font-size: 14px; overflow: hidden; text-overflow: clip;">This really a very very long text which will be much much longer as this label</label>
    

    事先谢谢!

    1 回复  |  直到 6 年前
        1
  •  0
  •   Patrick Pirzer    6 年前

    我们找到了解决方案! 当我们添加到样式中时,它会起作用

    • 空白:nowrap;
    • 台面布置:固定;

    下面是与问题中的示例进行比较的完整示例:

    <label id="40369" style="display: table; width: 260px; font-size: 14px; overflow: hidden; text-overflow: clip; white-space: nowrap; table-layout: fixed;">This really a very very long text which will be much much longer as this label</label>