儿童跨度元素离开父元素，flexbox / margin - 填充问题 [英] Child span element getting out of parent element, flexbox / margin - padding issue

问题描述

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

JSFiddle

.fixIssue {align-items：center;}。thumbnail {width：68px;身高：68px;边界半径：50％; object-fit：cover;}。imgDiv {border：1px solid yellow;宽度：100％;身高：100％;显示：flex; align-items：center; justify-content：space-around;}。textSpanInner {display：flex; justify-content：flex-start; align-items：center;}。linkStyle {display：block;溢出：隐藏;文本溢出：省略号;

< div style = height：150px; border：1px solid red; box-sizing：border-box> < span class =fixIssuestyle =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 style =flex：0 0 auto; margin-right：10px;> < span class =textSpanInner> < a href =class =linkStyle>大名HereBig Name HereBig Name HereBig Name Here< / a> < /跨度> < /跨度> < / span>< / div>

解决方案

当祖先是flex项目时，省略号可以工作，flex项目的所有子项和flex项目本身都需要 overflow：hidden （或 min-width：0 ），而flex项目也需要 flex-shrink： 1 ，所以它可以缩小到其内容以下。

另外，flex项目的 min-width 默认为 auto ，这也意味着它不能小于它的内容，因此需要 overflow：hidden （或 min-width：0 ）。 所以如果你做出以下改变它将工作：

• 添加溢出：隐藏到< span style =flex：0 1 auto; margin-right：10px; overflow：hidden>


• change flex-shrink 至 1 位于< span style =flex：0 1 auto; margin-right：10px; Ø


• 添加 overflow：hidden; 至。 textSpanInner $ b

  nofollow noreferrer>小提琴演示

  
  
  

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

  堆栈snippet

  
  
  

    .fixIssue {align-items：center;}。thumbnail {width ：68px;身高：68px;边界半径：50％; object-fit：cover;}。imgSpan {border：1px solid yellow;宽度：100％;身高：100％;显示：flex; align-items：center; justify-content：space-around;}。textSpanInner {display：flex; justify-content：flex-start; align-items：center; overflow：hidden;}。linkStyle {display：block;溢出：隐藏;文本溢出：省略号;  

  < div style = height：150px; border：1px solid red; box-sizing：border-box> < span class =fixIssuestyle =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 style =flex：0 1 auto; margin-right：10px; overflow：hidden> < span class =textSpanInner> < a href =class =linkStyle>大名HereBig Name HereBig Name HereBig Name Here< / a> < /跨度> < /跨度> < / span>< / div>

  I read post on similar issue but still not able to get it working.

  I am trying to have text ellipses when there is big text.

  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>

  解决方案

  For the ellipsis to work when an ancestor is a flex item, all the children of the flex item and the flex item itself need overflow: hidden (or min-width: 0), and the flex item also need flex-shrink: 1 so it is allowed to shrink below its content.

  Additionally, a flex item's min-width defaults to auto, which as well means it isn't allowed to be smaller than its content, hence the need of overflow: hidden (or min-width: 0).

  So if you make the following changes it will work:

  • add overflow: hidden to <span style="flex:0 1 auto; margin-right:10px; overflow: hidden">
  • change flex-shrink to 1 in <span style="flex:0 1 auto; margin-right:10px; overflow: hidden">
  • add overflow: hidden; to .textSpanInner

  Fiddle demo

  Note, I also swapped the imgDiv to a imgSpan as it is invalid to have a block element as a child of an inline element

  Stack snippet

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

  这篇关于儿童跨度元素离开父元素，flexbox / margin - 填充问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！