当元素包含长文本时,如何强制伪“ after”元素的宽度？

概述这个问题已经在这里有了答案：            >            Why is a flex item limited to parent size?                                    1个我有以下代码：@import url('https://fonts.googleapis.com/css?famil

这个问题已经在这里有了答案：            >            Why is a flex item limited to parent size?                                    1个
我有以下代码：

@H_419_7@@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;}

@H_419_7@<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>

结果看起来像这样：

如何使第四个红色正方形的宽度为150px？这里也是codepen.io link.最佳答案您可以通过添加flex-shrink来告诉它在任何情况下都不收缩：0-参见下面的演示：

@H_419_7@@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;}

@H_419_7@<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>

总结

以上是内存溢出为你收集整理的当元素包含长文本时,如何强制伪“ after”元素的宽度？ 全部内容，希望文章能够帮你解决当元素包含长文本时,如何强制伪“ after”元素的宽度？ 所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。