下面是我目前的情况:https://codepen.io/joondoe/pen/gJJLPx。
我喜欢它的排版设计,如下图所示:
在上图的右下角,你可以看到图片边框后面的文字,所以我假设是一个圆角框
我也会对我的css做同样的事情,但它失败了。到目前为止,文本溢出了边界。
下面是我的代码片段:
.round_box{
width:30%;
margin:auto;
text-align:left;
border: solid blue;
border-top-right-radius: 40%;
border-bottom-right-radius: 40%;
}
<div class="round_box" >
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
发布于 2019-06-06 05:44:41
您可能会使用css shape-outside
。
.circle{
width: 10em;
height: 10em;
border-radius: 5em;
background: #accede;
margin: 1em;
float: right;
shape-outside: circle(50%);
}
.content{
max-width: 500px;
}
<div class="circle"></div>
<div class="content">
Etiam non nisi luctus, malesuada nibh eget, viverra ante. Praesent at velit imperdiet enim condimentum consectetur eu sed nisl. Sed lorem dolor, efficitur at efficitur ac, euismod et neque. Nulla sit amet elit sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus euismod odio, a interdum elit venenatis non. Vestibulum molestie nisi sapien, vel egestas risus tristique vitae. Etiam non nisi luctus, malesuada nibh eget, viverra ante. Praesent at velit imperdiet enim condimentum consectetur eu sed nisl. Sed lorem dolor, efficitur at efficitur ac, euismod et neque. Nulla sit amet elit sem. Nullam ac malesuada magna, id auctor purus. Praesent viverra fermentum odio.
</div>
有关更多形状,请参见https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside。
https://stackoverflow.com/questions/56468362
复制相似问题