子跨度元素脱离父元素、flexbox / margin - 填充问题

Question

我在类似问题上阅读了 post，但仍然无法正常工作。

我试图在有大文本时使用文本省略号。

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），并且弹性项目也需要 flex-shrink: 1 所以它可以缩小到它的内容以下。

此外，弹性项目的 min-width 默认为 auto，这也意味着它不允许小于其内容，因此需要 overflow: hidden（或min-width: 0).

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

将 overflow: hidden 添加到 <span style="flex:0 1 auto; margin-right:10px; overflow: hidden">
在 <span style="flex:0 1 auto; margin-right:10px; overflow: hidden">

flex-shrink

1

将 overflow: hidden; 添加到 .textSpanInner

Fiddle demo

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

堆栈片段

.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;
}

<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;">      
      <span class="imgSpan">
       <img src="https://dummyimage.com/68x68/d612e8/" class="thumbnail" />
      </span>
    </span>
    <span style="flex:0 1 auto; margin-right:10px; overflow: hidden">
      <span class="textSpanInner">
        <a href="" class="linkStyle">Big Name HereBig Name HereBig Name HereBig Name Here</a>
      </span>
    </span>
  </span>
</div>

Answer 2

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

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

子跨度元素脱离父元素、flexbox / margin - 填充问题

Child span element getting out of parent element, flexbox / margin - padding issue

html

css

ellipsis

flexbox

JSFiddle