[英]p tag is not expanding its width when a fixed height is given to p in a flexbox container
Here is an example (with codepen included)这是一个例子(包括codepen)
https://codepen.io/Sanjid-Chowdhury/pen/QWBBGbJ https://codepen.io/Sanjid-Chowdhury/pen/QWBBGbJ
.container { display: flex; flex-direction: column; } p { height: 40px; }
<div class="container"> <p>Your data</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam nesciunt quam et repellendus harum possimus sequi, iusto nam tempore qui, sit quasi, Velit nisi numquam? non accusamus atque perspiciatis aperiam;</p> <p>WAFIjwaf oakd owad kalwd koawd sla ksa olafwa kosad </p> <p>afwad op wafk ag jasglksakmdfgfi efkf aioefjw oafkw alfk awijf jf dasklfskjasf ds</p> <p>eafifa osd okasg oeoagkesfal s;sdfpoasef ksadlf eaigjwg</p> </div>
If you decrease the window size, you will see that the <p>
tag overflows vertically.如果减小 window 的大小,您将看到<p>
标记垂直溢出。 I am looking for a behavior where the <p>
tag will expand just as much as it needs to, given its fixed height.我正在寻找一种行为,在这种情况下, <p>
标签将根据其固定高度进行扩展。 If i set the width of the .container
to width: max-content
, the whole tag turns into a line of text.如果我将.container
的宽度设置为width: max-content
,整个标签会变成一行文本。 I want it to take the available fixed height and then expand its width if the text starts to overflow vertically.我希望它采用可用的固定高度,然后在文本开始垂直溢出时扩展其宽度。
Try to add white-space:nowrap
to your p
tag尝试添加white-space:nowrap
到你的p
标签
.container { display: flex; flex-direction: column; } p { height: 40px; white-space: nowrap; }
<div class="container"> <p>Your data</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam nesciunt quam et repellendus harum possimus sequi, iusto nam tempore qui, sit quasi, Velit nisi numquam? non accusamus atque perspiciatis aperiam;</p> <p>WAFIjwaf oakd owad kalwd koawd sla ksa olafwa kosad </p> <p>afwad op wafk ag jasglksakmdfgfi efkf aioefjw oafkw alfk awijf jf dasklfskjasf ds</p> <p>eafifa osd okasg oeoagkesfal s;sdfpoasef ksadlf eaigjwg</p> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.