Question

我需要这个行为：

[Short title text.txt []]
[Little longer title text.txt []]
[Longer title text with text text text ...[]]
[Longer title text with text tex ...[icon 1]]
[Longer title text with  ...[icon 1, icon 2]]
[Short title text.txt [icon 1, icon 2]]

动态标题长度
动态结束图标数
每当文字溢出时添加'...'

目的是，有文件的标题，当标题太长时，在末尾添加'...'，在标题的末尾可以是图标指示符（多个，当前为0-2），必须在结尾处文字，而不是在行尾。

示例如何：https://jsfiddle.net/s7nLe6cs/

我认为这可能与此类似，但任何解决方案都不适用于此： How to force inline divs to stay on same line?

非常感谢。

Answer 1

如果内容有问题，请执行以下操作：

＆＃13;

.class-to-force-inline {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 50%; /* Whatever works here, I'm assuming two blocks with no padding/margin */
      display: inline-block;
      margin: 0; padding: 0;
    }

＆＃13;

<div class='class-to-force-inline'>
      Some super long text that just continues on forever and ever and ever.
    </div>
    <div class='class-to-force-inline'>
      Some shorter text.
    </div>

＆＃13;

了解文本溢出省略号所需要的是什么。

使用扩展文本强制div在同一行上

1 个答案: