html - 强制 div 与扩展文本在同一行

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

如果内容是问题，那么这样做:

.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;
    }

<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>

这就是让您的文本充满省略号所需要的。