Question

我有一行尝试管理flexbox，当我减少此行的宽度时，我希望主题和看到省略号收件人

目前，我的代码运行不正常，因为在调整窗口大小时会按下正确的部分。

＆＃13;

    <div class="row flex">
        <label class="checkbox">
            <input type="checkbox" />
        </label>
        <div class="metadata">
            <div class="flex">
                <a href="#" class="subject">Long long long long long long long subject</a>
                <div class="date">
                    <i class="fa fa-paperclip"></i> 12 fevrier 2016 <a href=""><i class="fa fa-star-o"></i></a>
                </div>
            </div>
            <div class="flex">
                <div class="recipients"><strong>Recipient1, Recipient2, Recipient3</strong></div>
                <div class="labels">
                    <span class="badge">Badge 1</span>
                    <span class="badge">Badge 2</span>
                    <span class="badge">Badge 3</span>
                </div>
            </div>
        </div>
    </div>

＆＃13;

EM_GETSEL

＆＃13;

Here a JSBin我当前的问题。

Answer 1

只需将flex-wrap: wrap;应用于内部Flex容器即可。

<强> CSS

.metadata .flex {
  flex-wrap: wrap;
}

这是一个有效的例子：

JSFiddle

*旁注：您无需指定order: 0;，因为在弹性框中，默认情况下将顺序设置为0。

Answer 2

这是一个很好的干净，现代的解决方案，具体取决于what you need to support。

display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;

坚持使用 .subject，.recipients 类。

Flexbox，白色空格和省略号

2 个答案: