Question

我希望我的文字像this一样包裹在我的图像（样式为圆形）周围，但是我想使用轮播，而不是常规图像。但是，当我使用轮播时，文字会像this一样自动换行。

我使用以下代码实现了第一个目标：

HTML：

<div class="w-100">
  <div id="circle-wrap"><img align="left" class="curve img-fluid img-profile rounded-circle mx-auto mb-2" width="300px" src="img/main.png" alt="">
    <h4 align="left" class="mb-0"><br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
  </div>
</div>

CSS：

#circle-wrap .curve {
   height: auto;
   padding: 10px 10px 10px 10px;
   float: left;
   margin-right:2rem;
   border-radius: 50%;
  -webkit-shape-inside:circle();
   shape-outside:circle();
}

这是我为轮播提供的代码：

HTML：

<div id="carouselControls" class="carousel slide carousel-fade" data-ride="carousel" data-interval="false">
 <div class="carousel-inner" role="listbox">
  <div class="carousel-item active">
   <img align="left" class="curve img-fluid img-profile rounded-circle mx-auto mb-2" src="img/ig.jpg">
  </div>
 </div>
 <a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
 </a>
 <a class="carousel-control-next" href="#carouselControls" role="button" data-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
 </a>
</div>

CSS：

#carouselControls .curve {
  height: auto;
  padding: 10px 10px 10px 10px;
  float: left;
  margin-right:2rem;
  border-radius: 50%;
  -webkit-shape-inside:circle();
  shape-outside:circle();
}

我似乎找不到任何正确组合两者的方法。有人可以帮忙吗？

Answer 1

您可以使用shape-outside CSS属性在图像上定义一个圆形，以便其旁边的内联文本围绕该形状流动：

.shape-circle {
  shape-outside: circle(50%);
  padding-right: 1em;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" media="screen" />


<div class="w-100">
  <div id="circle-wrap"><img align="left" class="curve img-fluid img-profile rounded-circle mx-auto mb-2 shape-circle" src="https://picsum.photos/300/300" alt="">
    <h4 align="left" class="mb-0"><br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h4>
  </div>
</div>

一旦有了它，它就可以在轮播中以相同的方式工作。

.shape-circle {
  shape-outside: circle(50%);
  padding-right: 1em;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" media="screen" />


<div id="carouselControls" class="carousel slide carousel-fade" data-ride="carousel" data-interval="false">
 <div class="carousel-inner" role="listbox">
  <div class="carousel-item active">
   <img align="left" class="curve img-fluid img-profile rounded-circle mx-auto mb-2 shape-circle" src="https://picsum.photos/id/390/300/300">
   <h4 align="left" class="mb-0"><br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h4>
  </div>
 </div>
 <a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
 </a>
 <a class="carousel-control-next" href="#carouselControls" role="button" data-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
 </a>
</div>

如果您希望文本位于轮播项目之外，则可能需要覆盖某些轮播项目css。

.shape-circle {
  shape-outside: circle(50%);
}

.carousel-item {
  width: 300px !important;
  margin-right: 0 !important;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" media="screen" />


<div id="carouselControls" class="carousel slide carousel-fade" data-ride="carousel" data-interval="false">
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active shape-circle">
      <img align="left" class="curve img-fluid img-profile rounded-circle mx-auto mb-2 " src="https://picsum.photos/id/390/300/300">
    </div>
    <h4 align="left" class="mb-0"><br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h4>
  </div>

  <a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

如何在圆形转盘上包裹文字？

1 个答案: