儿童跨度元素离开父元素，flexbox / margin - 填充问题

Question

我读了类似问题的帖子，但仍无法使其正常运作。

当有大文本时，我正在尝试使用文本省略号。

JSFiddle

.fixIssue {
  align-items: center;
}

.thumbnail {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
}

.imgDiv {
  border: 1px solid yellow;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.textSpanInner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

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

<div style="height: 150px; border: 1px solid red;box-sizing:border-box">
  <span class="fixIssue" style="display:flex; justify-content:flex-start;flex-wrap:nowrap;height:100px; border:1px dotted green;">
    <span style="flex:0 0 auto; margin-right:10px;">
      
      <div class="imgDiv">
      	<img src="https://dummyimage.com/68x68/d612e8/" class="thumbnail" />
      </div>
  	</span>
  <span style="flex:0 0 auto; margin-right:10px;">
          <span class="textSpanInner">
            <a href="" class="linkStyle">Big Name HereBig Name HereBig Name HereBig Name Here</a>
          </span>
  </span>
  </span>
</div>

Answer 1

当祖先是弹性项目时，ellipsis工作，弹性项目的所有子项和弹性项目本身都需要overflow: hidden（或min-width: 0）和弹性item也需要flex-shrink: 1，因此允许缩小到其内容以下。

此外，弹性项min-width默认为auto，这也意味着它不允许小于其内容，因此需要{{1} （或overflow: hidden）。

因此，如果您进行以下更改，它将起作用：

• 将min-width: 0添加到overflow: hidden
• 在<span style="flex:0 1 auto; margin-right:10px; overflow: hidden">
中将flex-shrink更改为1
• 将<span style="flex:0 1 auto; margin-right:10px; overflow: hidden">添加到overflow: hidden;

Fiddle demo

注意，我还将.textSpanInner换成imgDiv，因为将块元素作为内联元素的子元素无效

Stack snippet

＆＃13;

＆＃13;

imgSpan

＆＃13;

.fixIssue {
  align-items: center;
}

.thumbnail {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
}

.imgSpan {
  border: 1px solid yellow;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.textSpanInner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

要进行文本省略，只需将width属性设置为文本所在的元素即可。 对于你的情况重写这个：

.textSpanInner {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: 50px; //for example
}