问题:当使用边框半径和溢出时,文本会在角落里消失。
问题:是否可以将文本包含在边框半径内?
我不知道每页文本的长度,因此解决方案需要适用于大多数情况。
null
<div style="box-shadow: 5px 5px 16px 10px rgba(130,124,110,.25);border-radius: 39% 28% 64% 20% / 28% 16% 57% 66%;max-width:500px;max-height:500px;overflow:hidden;">
<ul>
<li>Chuck Norris doesn’t read books. He stares them down until he gets the information he wants.</li>
<li>Time waits for no man. Unless that man is Chuck Norris.</li>
<li>If you spell Chuck Norris in Scrabble, you win. Forever.</li>
<li>Chuck Norris breathes air … five times a day.</li>
<li>In the Beginning there was nothing … then Chuck Norris roundhouse kicked nothing and told it to get a job.</li>
<li>When God said, “Let there be light!” Chuck said, “Say Please.”</li>
<li>Chuck Norris has a mug of nails instead of coffee in the morning.</li>
<li>If Chuck Norris were to travel to an alternate dimension in which there was another Chuck Norris and they both fought, they would both win.</li>
<li>The dinosaurs looked at Chuck Norris the wrong way once. You know what happened to them.</li>
<li>Chuck Norris’ tears cure cancer. Too bad he has never cried.</li>
<li>Chuck Norris once roundhouse kicked someone so hard that his foot broke the speed of light</li>
</ul>
</div>
null
下面是一个使用shape-outisde的近似1。 这有点棘手,但是您需要添加更多的容器才能有4个伪元素用作浮动元素,并且还要有一个flex容器才能对浮动元素使用height:100%
。
这些值是根据您的情况进行的近似值。 没有特别的计算,只是简单的试错
1:不是一个完美的解决方案,因为部分文本仍可能溢出
null
.box {
max-width: 500px;
}
.box div {
height: 100%;
}
.box>div {
height: 130%;
box-shadow: 5px 5px 16px 10px rgba(130, 124, 110, .25);
border-radius: 39% 28% 64% 20% / 28% 16% 57% 66%;
}
.box::before {
content: "";
float: left;
height: 33%;
width: 40%;
shape-outside: radial-gradient(farthest-side at bottom right, transparent 99%, #fff 100%);
}
.box>div::before {
content: "";
float: right;
height: 16%;
width: 28%;
shape-outside: radial-gradient(farthest-side at bottom left, transparent 99%, #fff 100%);
}
.box>div>div>ul::before {
content: "";
float: right;
height: 75%;
width: 53%;
shape-outside: radial-gradient(farthest-side at top left, transparent 99%, #fff 100%);
}
.box>div>div::before {
content: "";
float: left;
clear: left;
height: 78%;
width: 20%;
shape-outside: radial-gradient(farthest-side at top right, transparent 99%, #fff 100%);
}
.container {
display: flex;
max-height: 500px;
}
ul {
margin: 0;
padding: 0;
list-style-position: inside;
height: 100%;
}
<div class="container">
<div class="box">
<div>
<div>
<ul>
<li>Chuck Norris doesn’t read books. He stares them down until he gets the information he wants.</li>
<li>Time waits for no man. Unless that man is Chuck Norris.</li>
<li>If you spell Chuck Norris in Scrabble, you win. Forever.</li>
<li>Chuck Norris breathes air … five times a day.</li>
<li>In the Beginning there was nothing … then Chuck Norris roundhouse kicked nothing and told it to get a job.</li>
<li>When God said, “Let there be light!” Chuck said, “Say Please.”</li>
<li>Chuck Norris has a mug of nails instead of coffee in the morning.</li>
<li>If Chuck Norris were to travel to an alternate dimension in which there was another Chuck Norris and they both fought, they would both win.</li>
<li>The dinosaurs looked at Chuck Norris the wrong way once. You know what happened to them.</li>
<li>Chuck Norris’ tears cure cancer. Too bad he has never cried.</li>
<li>Chuck Norris once roundhouse kicked someone so hard that his foot broke the speed of light</li>
</ul>
</div>
</div>
</div>