Question

我有这个HTML，我试图使元素内联，如果页面宽度不适合元素，则让标题文本有省略号。

问题：如何在标题文本上实现内联和省略号元素？

页面上足够宽的布局如下所示:(其中'i'是可点击的图标，中间是文本）

+---+----------------------+---+
| i | Title text           | i |
+---+----------------------+---+

如果页面宽度响应且太窄而无法包含元素，我希望标题有省略号，结果应如下所示：

+---+--------------+---+
| i | Title t...   | i |
+---+--------------+---+

这样图标仍然显示，没有任何内容包裹到新行。

目前，它包装并且文本的省略号如下：

+---+
| i | 
+---+--------+
| Title t... |
+---+--------+
| i |
+---+

代码看起来像这样

    .ellipsis{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .visible-xs {
        display: block;
    }

    <div class="col-md-6">
        <a class="visible-xs">
            <i class="fa fa-indent"></i>
        </a>
        <div class="ellipsis">
            Title text
        </div>
        <a>
            <i class="fa fa-pencil"></i>
        </a>
    </div>

请注意，visible-xs类有display: block，当页面足够宽时，我需要此类来删除元素。它来自于响应能见度。

Answer 1

如果flexbox是一个选项，只需将其添加到col-md-6元素：

.myclass {
  display: flex;
  /* justify-content: space-between; */
  justify-content: flex-start; /* EDIT */
}

干杯！

.ellipsis{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.visible-xs {
    display: block;
}

.myclass {
  display: flex;
  /* justify-content: space-between; */
  justify-content: flex-start; /* EDIT */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">

<div class="col-md-6 myclass">
  <a class="visible-xs">
    <i class="fa fa-indent"></i>
  </a>
  <div class="ellipsis">
    Title text
  </div>
  <a>
    <i class="fa fa-pencil"></i>
  </a>
</div>

Answer 2

text-overflow: ellipsis;可以提到最大宽度或宽度。

<强>样本：

http://plnkr.co/edit/RHYtvupwLJZ7L4eCSib1?p=preview

.ellipsis {
  width: 100px;
  margin: 0 10px;
}

.ellipsis span {
    white-space: nowrap;
    overflow: hidden;
    max-width: 50px;
    text-overflow: ellipsis;
}

.visible-xs {
    display: block;
}

a, div {
  float: left;
}

<div class="col-md-6">
    <a class="visible-xs">
        ji
    </a>
    <div class="ellipsis">
        <span>Title text</span>
    </div>
    <a>
        hi
    </a>
</div>

带有省略号的内联元素

2 个答案: