Question

我试图格式化一系列警告信息。每条消息都是一个由3个弹性项组成的弹性框：一个小的彩色圆圈（i标签），然后是2个带有不同文本的标签，具体取决于警告。我希望它们都是左对齐的，第一个p和第二个之间的间距一致。

问题是当其中一个p元素中存在换行符时（当警告标题或描述变得太长时），整个p元素的宽度会改变并超出文本的右边缘，从而导致左右p标签之间的大空白区域。

Hopefully this image will describe the issue better. The first 4 lines are fine, but on line 5 there is too much space because the width of the first p element expanded.

＆＃13;

.warnings {
  width: 600px;
}

.warning {
  display: inline-flex;
  align-items: baseline;
}

＆＃13;

<div class="warnings">
  <div class="warning">
    <i class="fa fa-circle"></i>
    <p class="type">Warning type</p>
    <p class="description">Warning description text goes here</p>
  </div>
  <div class="warning">
    <i class="fa fa-circle"></i>
    <p class="type">Short Warning type</p>
    <p class="description">Warning description text goes here</p>
  </div>
  <div class="warning">
    <i class="fa fa-circle"></i>
    <p class="type">Very long warning looks like this</p>
    <p class="description">Warning description text goes here</p>
  </div>
  <div class="warning">
    <i class="fa fa-circle"></i>
    <p class="type">Warning type</p>
    <p class="description">Warning description text goes here and on and on and on and on and on and on</p>
  </div>
</div>

＆＃13;

Answer 1

将flex-shrink: 3设置为应比其他项目缩小的项目。这将使项目尽可能缩小。

＆＃13;

.warnings { width: 600px; }
.warning { display: inline-flex; align-items: baseline; }

body {
  font-family: sans-serif;
}

p.description {
  font-weight: bold;
}

.type {
  margin: 0 5px;
  flex-shrink: 3;
}

＆＃13;

<script src="https://use.fontawesome.com/releases/v5.0.9/js/all.js"></script>
<div class="warnings">
    <div class="warning">
        <i class="fa fa-circle"></i>
        <p class="type">Warning type</p>
        <p class="description">Warning description text goes here</p>
    </div>
    <div class="warning">
        <i class="fa fa-circle"></i>
        <p class="type">Short Warning type</p>
        <p class="description">Warning description text goes here</p>
    </div>
    <div class="warning">
        <i class="fa fa-circle"></i>
        <p class="type">Very long warning looks like this</p>
        <p class="description">Warning description text goes here</p>
    </div>
    <div class="warning">
        <i class="fa fa-circle"></i>
        <p class="type">Warning type</p>
        <p class="description">Warning description text goes here and on and on and on and on and on and on</p>
    </div>

＆＃13;

Answer 2

我在 flex 上使用 p 时遇到了类似的问题。我发现的解决方法是将 p 元素包裹在另一个 div 中并且宽度正确。

我认为当 p 元素变大时，尽管有自动换行，但 flex 认为它是一个更大的元素并缩小其他元素

Flex项目在其中的文字换行时会更改宽度

2 个答案: