当元素包含长文本时，如何强制伪“后”元素的宽度？ [复制]

Question

我有以下代码：

@import url('https://fonts.googleapis.com/css?family=Abril+Fatface');
ol {
  list-style: none;
  counter-reset: my-awesome-counter;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

ol li {
  counter-increment: my-awesome-counter;
  display: flex;
  width: 50%;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}

ol li::before {
  content: counter(my-awesome-counter);
  font-weight: bold;
  font-size: 3rem;
  margin-right: 0.5rem;
  font-family: 'Abril Fatface', serif;
  line-height: 1;
  width: 150px;
  display: inline-block;
  border: 1px solid red;
  text-align: right;
}

body {
  padding: 1rem;
  font-family: sans-serif;
}

<ol>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Tempore nostrum laborum sequi obcaecati.</li>
  <li>Illo iusto dolores magnam ratione!</li>
  <li>Very very very very very very very very very very very very ...long text!</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
</ol>

结果如下：

如何使第 4 个红色方块的宽度为 150 像素？这里也是codepen.io link。

Answer 1

您可以通过添加flex-shrink: 0 告诉它在任何情况下都不要缩小 - 请参见下面的演示：

@import url('https://fonts.googleapis.com/css?family=Abril+Fatface');
ol {
  list-style: none;
  counter-reset: my-awesome-counter;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

ol li {
  counter-increment: my-awesome-counter;
  display: flex;
  width: 50%;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}

ol li::before {
  content: counter(my-awesome-counter);
  font-weight: bold;
  font-size: 3rem;
  margin-right: 0.5rem;
  font-family: 'Abril Fatface', serif;
  line-height: 1;
  width: 150px;
  display: inline-block;
  border: 1px solid red;
  text-align: right;
  flex-shrink: 0; /* added */
}

body {
  padding: 1rem;
  font-family: sans-serif;
}

<ol>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Tempore nostrum laborum sequi obcaecati.</li>
  <li>Illo iusto dolores magnam ratione!</li>
  <li>Ampedit! impredit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias
    impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet
    odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum
    alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet
    odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!</li>
  <li>Amet odio rerum alias impedit!</li>
  <li>Amet odio rerum alias impedit!</li>
  <li>Amet odio rerum alias impedit!</li>
  <li>Amet odio rerum alias impedit!</li>
  <li>Amet odio rerum alias impedit!</li>
  <li>Amet odio rerum alias impedit!</li>
  <li>Amet odio rerum alias impedit!</li>
  <li>Amet odio rerum alias impedit!</li>
  <li>Amet odio rerum alias impedit!</li>
  <li>Amet odio rerum alias impedit!</li>
</ol>