Question

这是我在HTML中所拥有的：

<ng-container ...>
    <li class="list-group-item-action ...">
      <span>My long long text</span>
      <div class="buttons">
          <some ng actions here...>
      </div>
    </li>
</ng-container>

问题是，当我缩小页面边框时，这些按钮不会重叠我的文本，而是换行，整个选择的大小都有些膨胀。

所以基本上，第一步，我有这样的东西：

-----------------------------------------------
| My long long text    [_button1_][_button2_] |
-----------------------------------------------

缩小页面时，我看到以下内容：

                        <------
-------------------------------------
| My long long text                 |
|            [_button1_][_button2_] |
-------------------------------------

我要实现的是如果更改页面边框，这些按钮将使文本重叠，并且我会看到文本省略号效果（...）

                       <------
-------------------------------------
| My long... [_button1_][_button2_] |
-------------------------------------

如何通过divs / CSS制作它？

P.S .：对如此奇怪的问题描述感到抱歉，我不擅长UI。

Answer 1

overflow: hidden防止元素在外部溢出内容，并且text-overflow: ellipsis在文本被剪切后放置省略号。还可以使用white-space: nowrap来防止文本开始换行。

为此使用表可能会更容易，因为表可以将元素强制为一行。

Answer 2

您可以执行以下操作：

li span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: calc( 100% - 40px );
}

样品：

ul {
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 15px auto;
  max-width: 550px;
}
li {
  display: block;
}
li span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: calc( 100% - 70px );
  display: inline-block;
}
li .buttons {
  display: inline-block;
}

<ul>
  <li>
    <span>Lorem ipsum dolor sit amet</span>
    <div class="buttons">
      <button>✖</button>
      <button>?</button>
    </div>
  </li>
  <li>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    <div class="buttons">
      <button>✖</button>
      <button>?</button>
    </div>
  </li>
  <li>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</span>
    <div class="buttons">
      <button>✖</button>
      <button>?</button>
    </div>
  </li>
  <li>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
    <div class="buttons">
      <button>✖</button>
      <button>?</button>
    </div>
  </li>
  <li>
    <span>Lorem ipsum dolor sit amet conterure</span>
    <div class="buttons">
      <button>✖</button>
      <button>?</button>
    </div>
  </li>
</ul>

在与按钮重叠的情况下添加文本省略号

2 个答案: