将Flex内容限制在其父级内部 [英] Having a flex content confined inside its parent

问题描述

我在此处创建了一个弹性布局- https://jsfiddle.net/7t1m0gL2/13/

I have a flex layout as created in here - https://jsfiddle.net/7t1m0gL2/13/

问题是，即使提供了overflow: hidden等，长文本也会超出其父级以占据更多空间.

The problem being, the long text goes beyond its parent to occupy further space even if overflow: hidden etc. are provided.

.left {
  width: 40%;
  background-color: cyan;
  height: 50px;
  padding: 5px 0; 
}

.profile {
  padding: 5px 0;  
  display: flex;
  flex-direction: row;
}  


.image {
  height: 40px;
  width: 40px;
  margin-right: 5px;
  background-color: orange;
}  
      
.text {
  display: flex;
  flex-direction: column;
}
      
.name {
  color: red;
}

.description {
  color: blue;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

<div class="master">
  <div class="left">
    <div class="profile">
      <div class="image">
      </div>
      <div class="text">
        <div class="name">
          Some short name
        </div>
        <div class="description">
          Some very long description that's most likely to overflow here
        </div>
      </div>
    </div>
  </div>
</div>

推荐答案

您需要在.text元素中添加overflow: hidden类.内部元素不知道其父元素的宽度，因此需要在包含需要被截断的元素的元素上设置overflow属性.

You need to add a class of overflow: hidden to your .text element. The inner element is not aware of the width of its parent, therefore you need to set the overflow property on the element containing the element that needs to be truncated.

.left {
  width: 40%;
  background-color: cyan;
  height: 50px;
  padding: 5px 0; 
}

.profile {
  padding: 5px 0;  
  display: flex;
  flex-direction: row;
}  


.image {
  height: 40px;
  width: 40px;
  margin-right: 5px;
  background-color: orange;
}  
      
.text {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
      
.name {
  color: red;
}

.description {
  color: blue;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

<div class="master">
  <div class="left">
    <div class="profile">
      <div class="image">
      </div>
      <div class="text">
        <div class="name">
          Some short name
        </div>
        <div class="description">
          Some very long description that's most likely to overflow here
        </div>
      </div>
    </div>
  </div>
</div>

这篇关于将Flex内容限制在其父级内部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！