Question

我正在尝试使用文本省略号构建流畅的内容宽度..我发现了这个问题： Fluid width with text-overflow ellipsis

我的要求几乎相同，但是：

.container已修复已知宽度320px
.extra-text（上一个问题中的.badge）可以是任何宽度，但不应超过60px
.content和.extra-text必须作为段落换行，并且不能超过2行，最大高度为44px;如果.content有大量文字
.content可以是一个单词或长文本，如果是长文本，则会在.container内包含省略号

浏览器支持：IE9

.container {    
    width: 320px;
    max-height: 44px;    
    position: relative; 
    background: #e2e2e2;
    text-align: center;
}

/** Demo */
.container + .container {
    margin-top: 1rem;
}

<div class="container">
    <span class="content">TITLE</span>
    <span class="extra-content">extra-text</span>
</div>
<div class="container">
    <span class="content">ANOTHER LONGER LONG LONG LONG LONG LONG LONG LONG LONG TITLE</span>
    <span class="extra-content">extra-text</span>
</div>

所以在第二个块中，最新的单词“LONG TITLE”应该是省略号，并且应该有额外的文本..

编辑以获得精确度：

这是我需要的“规范”：

+-------------------+
|lorem ipsum example|
|lorem ipsum example|
|lorem ... extra-txt|/* Content is long, "..." is need to display extra-txt */
+-------------------+

+-------------------+
|lorem extra-txt    |/* Here content is short so I don't need ellipsis. */
+-------------------+

带有文本溢出省略号的几行上的流体文本

0 个答案: