时间戳

首页 > 解决方案 > CSS - 如何使我的文本遵循我的边框半径

html - CSS - 如何使我的文本遵循我的边框半径

问题描述

这是我目前情况的代码笔：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>

标签： htmlcss

解决方案

您可能会使用 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。

推荐阅读