文本溢出：省略号和 flex

Posted 2023-03-06

【中文标题】文本溢出：省略号和 flex

【英文标题】：text-overflow: ellipsis and flex

【发布时间】：2017-01-21 05:10:18

【问题描述】：

我有一个带有display: flex 属性集的容器元素。 一个孩子有固定宽度（flex: 0 0 auto），另一个没有（flex: 1）。灵活的孩子还有一些其他的孩子：我希望这个容器（inner）根据父宽度剪辑它的孩子。

我设法做到了这一点，但我也希望 ellipsis 溢出，以防内容被剪辑（孩子的数量不固定）。

这是我目前的代码：

.outer 
  border: 1px solid red;
  display: flex;
  width: 400px;


.inner 
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex: 1;
  text-overflow: ellipsis;


.child 
  display: inline-block;
  white-space: nowrap;
  flex: 1;
  border: 1px solid blue;


.btn 
  border: 1px solid green;
  flex: 0 0 auto;

住在这里：http://jsbin.com/niheyiwiya/edit?html,css,output

我怎样才能得到以下期望的结果？ （欢迎黑客攻击 - 请仅使用 css！）

【问题讨论】：

省略号 css 属性对此不起作用，因为您试图在元素上使用它，而不是文本。

你可以做的一件事是给flex-wrap: wrap的.inner类属性

display:flex 不是块容器；不出所料，它是一个弹性容器。

【参考方案1】：

除了上一个答案：

如果你嵌套了弹性元素，那么你必须添加

white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

到父容器，否则溢出的隐藏可能不再起作用。

在某些情况下，您需要width: 0; 来补充/代替min-width: 0;。

【参考方案2】：

min-width: 0; 的一个很好的例子：https://css-tricks.com/flexbox-truncated-text/

但是：

如果您要转录的文本在 a-tag 内，则您必须包装该 a-tag，例如h2 或 p。否则文本不会因为a-tag而被截断！

以下是基于上述示例的带有 a-tag 的工作示例：

.flex-parent 
	display: flex;
	align-items: center;


.long-and-truncated-with-child-corrected 
	flex: 1;
	min-width: 0;
  /* or some value */;


.long-and-truncated-with-child-corrected h2 
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;


.short-and-fixed 
	white-space: nowrap;


.short-and-fixed > div 
	width: 30px;
	height: 30px;
	border-radius: 10px;
	background: lightgreen;
	display: inline-block;

<div class="flex-parent">

      <div class="long-and-truncated-with-child-corrected">
        <h2>
          <a href="https://duckduckgo.com">333333333333333333333333333333333333333333333333333333333333333333333333333333333333333</a>
        </h2>
    
      </div>
      <div class="long-and-truncated-with-child-corrected">
        <h2>
          <a href="https://vgn.de">
            44444444444444444444444444444444444444444444444444444444444444444444444444444444444444444
          </a>
        </h2>
      </div>
      <div class="short-and-fixed">
        <div></div>
        <div></div>
        <div></div>
      </div>

</div>

【参考方案3】：

这是 JS 方法，您可以在其中找到哪个 child div 的位置与按钮的位置溢出，并隐藏该 div 之后的所有 div 并在该 div 之后附加 ...。

var child = $('.child');
var btn = $('.btn');
var oW = $('.outer').innerWidth();
var w = btn.outerWidth();
var c = oW - w;
var last;

child.each(function() 
  var l = $(this).position().left + $(this).outerWidth();
  if (l > c) 
    if (last == undefined) last = $(this).index() - 1;
  
)

$('.child:gt(' + last + ')').css('display', 'none');
$('.child:eq(' + last + ')').after(' ...')

* 
  margin: 15px 1px

.outer 
  border: 1px solid red;
  display: flex;
  width: 400px;

.inner 
  overflow: hidden;
  white-space: nowrap;
  flex: 1;

.child 
  border: 1px solid blue;
  display: inline-block;

.btn 
  border: 1px solid green;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
  <div class="inner">
    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 4</div>
    <div class="child">child 5</div>
    <div class="child">child 6</div>
    <div class="child">child 7</div>
  </div>
  <div class="btn">My big big big button!</div>
</div>

【参考方案4】：

您的布局存在一些问题：

text-overflow: ellipsis 仅适用于 display: block 和 display: inline-block 容器。它失败了，因为您将 .inner 设置为 display: flex。

text-overflow: ellipsis 必须在同一声明中包含 white-space: nowrap。您的 .inner 规则中缺少它。

省略号适用于文本，而不适用于块级元素

试试这个：

* 
  margin: 15px 1px

.outer 
  border: 1px solid red;
  display: flex;
  width: 400px;

.inner 
  /* display: flex */          /* removed */
  min-width: 0;
  overflow: hidden;
  flex: 1;
  text-overflow: ellipsis;
  white-space: nowrap;         /* new */

.child 
  display: inline;             /* adjusted */
  white-space: nowrap;
  flex: 1;

.btn 
  border: 1px solid green;
  flex: 0 0 auto;

<div class="outer">
  <div class="inner">
    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 4</div>
    <div class="child">child 5</div>
    <div class="child">child 6</div>
    <div class="child">child 7</div>
  </div>
  <div class="btn">My big big big button!</div>
</div>

更多关于text-overflow: ellipsis的信息在这里：Applying an ellipsis to multiline text