CSS-如何使我的文字跟随边框的半径 [英] CSS - how make my text follows the radius of my border

问题描述

这里是我当前情况的代码笔：

在上图的右下角，您可以在此处看到图片边框之后的文本，因此我认为这是一个圆形的框

我可以对CSS执行相同的操作，但是失败了。到目前为止，文本溢出了边框。

这是我的代码段：

  .round_box {宽度：30％;保证金：自动; text-align：left;边框：纯蓝色；右上角边框半径：40％； border-bottom-right-radius：40％;}  

  < div class = round_box> Lorem Ipsum只是印刷和排版行业的伪文本。自1500年代以来，Lorem Ipsum一直是行业的标准伪文本，当时一位不知名的打印机拿起了一个样板间，然后将其拼写成样本。它不仅生存了五个世纪，而且在电子排版方面也取得了飞跃，但基本上没有改变。它在1960年代开始流行，发布了包含Lorem Ipsum段落的Letraset表格，最近又发布了包括Alres PageMaker在内的桌面发行软件，包括Lorem Ipsum的版本。 < / div>  

解决方案

您可能会使用css shape-outside ：

  .circle {width：10em;高度：10em；边界半径：5em；背景：#accede;保证金：1em;浮动：正确； shape-outside：circle（50％）;}。content {最大宽度：500px;}  

 < div class = circle>< / div>< div class = content" Etiam non nisi luctus，malesuada nibh eget，viverra ante。速效不易食用调味品的优点。 Sed lorem dolor，效率ac，euismod等。 Nulla坐在amet精英sem。 Lorem ipsum dolor坐下，一直保持着安静的状态。 Pellentesque tempus euismod dioo，非中间高等委内瑞拉。 Vestibulum molestie nisi sapien，Vel egestas risus tristique vitae Etiam non nisi luctus，Malesuada nibh eget，维维拉安特。速效不易食用调味品的优点。 Sed lorem dolor，效率ac，euismod等。 Nulla坐在amet精英sem。 Nullam ac malesuada magna，身份auctor purus。 Praesent viverra fermentum odio。< / div>  

请参见 https://developer.mozilla.org/zh-CN/docs/ Web / CSS / shape-outside 获取更多形状。

Here the codepen of my current situation: https://codepen.io/joondoe/pen/gJJLPx.

I like the typographical design, like the following image:

At the bottom right of the above image, you can see the text following the border of the picture here, so a rounded box I assume

I would do the same with my css but it fails. So far the text overflows the borders.

Here my snippet:

.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>

解决方案

You could potentially use 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>

See https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside for more shapes.

这篇关于CSS-如何使我的文字跟随边框的半径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！