logo标签列表

如何确保文本位于圆角div内部？

csshtml
37

我想让我的圆形 div 包含其中的文本，就像您在图像中所见 Round div with text inline

如何使用 CSS 实现这一点？ 因为我的圆形 div，将使文本看起来像方形。 http://jsfiddle.net/kUJq8/

div {
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: #333;
    color: #FFF;
}
非矩形边框上的流式布局？考虑到HTML刚刚具备了矩形边框上对象之间的流动功能，这可能会很棘手。 - Orbling
1
可能是重复问题：“在圆形内放置文本段落 [CSS]” - Paul Roub
也许你会发现这个网站 http://www.csstextwrap.com/ 很有用。 - vals
7个回答
13

现在，shape-outside 可以是一个选项：

https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside

shape-outside CSS 属性定义了一个形状（可以是非矩形），周围的相邻行内内容应该绕过该形状。默认情况下，行内内容绕过其边缘框；shape-outside 提供了一种自定义这种包装的方式，使得文本可以围绕复杂的对象而不是简单的盒子环绕。

图像或渐变可用于绘制形状，使文本远离它们。

对于圆形，需要4个片段，可以从伪元素中产生。

  • 思路是从一个尺寸为正方形的盒子开始，使用4个带有径向渐变背景的浮动伪元素绘制圆形/中心的外部。

div:not([class]) {
  width: 10em;
  height: 10em;
  border-radius: 50%;
  background: #333;
}

div[class]:before {
  content: '';
  float: left;
  clear: left;
  height: 5em;
  width: 5em;
  background: radial-gradient( circle at bottom right, transparent 69%, red 69%);
}

div[class][id]:before {
  background: radial-gradient( circle at top right, transparent 69%, red 69%);
}

div[class]:after {
  content: '';
  float: right;
  clear: right;
  height: 5em;
  width: 5em;
  background: radial-gradient( circle at bottom left, transparent 69%, red 69%);
}

div[class][id]:after {
  background: radial-gradient( circle at top left, transparent 69%, red 69%);
}


/* extra */

html {
  display: flex;
  height: 100%;
}

body {
  background: #399;
  margin: auto;
}
<div>
  <div class=shape></div>
  <div class=shape id=idAttribute></div>
</div>

  • 现在我们知道了我们的径向渐变在正确的位置，我们可以将它们用作形状来将文本从这些区域推开。渐变不会被绘制出来，只有形状会被使用。

div:not([class]) {
/* em is to manage the text length and so is the font-sfamily and line-height */

  font-family:verdana;
  font-size:16px;
  line-height:1.25em;
  text-align:justify;
  width: 10em;
  height: 10em;
  border-radius: 50%;
  background: #333;
  color:#fff;
}

div[class]:before {
  content: '';
  float: left;
  clear: left;
  height: 5em;
  width: 5em;
  /*background*/ shape-outside: radial-gradient( circle at bottom right, transparent 69%, red 69%);
}

div[class][id]:before {
 /*background*/ shape-outside: radial-gradient( circle at top right, transparent 69%, red 69%);
}

div[class]:after {
  content: '';
  float: right;
  clear: right;
  height: 5em;
  width: 5em;
 /*background*/ shape-outside: radial-gradient( circle at bottom left, transparent 69%, red 69%);
}

div[class][id]:after {
 /*background*/ shape-outside: radial-gradient( circle at top left, transparent 69%, red 69%);
}


/* extra */

html {
  display: flex;
  height: 100%;
}

body {
  background: #399;
  margin: auto;
}
<div>
  <div class=shape></div>
  <div class=shape id=idAttribute></div>
  Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Pel lentes que ultri cies. 
</div>

输入图像说明

这是您的代码示例，现已更新以与https://codepen.io/gc-nomade/pen/zQVoWO一起使用。

我们还可以考虑使用CSS变量，以便根据文本内容轻松调整代码：

div:not([class]) {
/* em is to manage the text length and so is the font-sfamily and line-height */
  
  --s:10em; /*Size of the circle */

  font-family:verdana;
  font-size:16px;
  line-height:1.25em;
  text-align:justify;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #333;
  color:#fff;
  display:inline-block;
  vertical-align:middle;
  margin:5px;
}

div[class]:before {
  content: '';
  float: left;
  clear: left;
  height: calc(var(--s)/2);
  width: calc(var(--s)/2);
  /*background*/ shape-outside: radial-gradient( circle at bottom right, transparent 69%, red 69%);
}

div[class][id]:before {
 /*background*/ shape-outside: radial-gradient( circle at top right, transparent 69%, red 69%);
}

div[class]:after {
  content: '';
  float: right;
  clear: right;
  height: calc(var(--s)/2);
  width: calc(var(--s)/2);
 /*background*/ shape-outside: radial-gradient( circle at bottom left, transparent 69%, red 69%);
}

div[class][id]:after {
 /*background*/ shape-outside: radial-gradient( circle at top left, transparent 69%, red 69%);
}


/* extra */
body {
  background: #399;
  margin: 0;
}
<div>
  <div class=shape></div>
  <div class=shape id=idAttribute></div>
  Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Pel lentes que ultri cies. 
</div>

<div style="--s:20em">
  <div class=shape></div>
  <div class=shape id=idAttribute></div>
  Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Pel lentes que ultri cies. Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Pel lentes que ultri cies. Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Pel lentes que ultri cies. Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Pel lentes que ultri cies. Lorem ipsum dolor sit amet, eget orci. orci. rat
</div>

enter image description here

radial-gradient还有另一种语法：

div:not([class]) {
/* em is to manage the text length and so is the font-sfamily and line-height */
  
  --s:10em; /*Size of the circle */

  font-family:verdana;
  font-size:16px;
  line-height:1.25em;
  text-align:justify;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #333;
  color:#fff;
  display:inline-block;
  vertical-align:middle;
  margin:5px;
}

div[class]:before {
  content: '';
  float: left;
  clear: left;
  height: calc(var(--s)/2);
  width: calc(var(--s)/2);
  /*background*/ shape-outside: radial-gradient(farthest-side at bottom right, transparent 100%, red 0);
}

div[class][id]:before {
 /*background*/ shape-outside: radial-gradient(farthest-side at top right, transparent 100%, red 0);
}

div[class]:after {
  content: '';
  float: right;
  clear: right;
  height: calc(var(--s)/2);
  width: calc(var(--s)/2);
 /*background*/ shape-outside: radial-gradient(farthest-side at bottom left, transparent 100%, red 0);
}

div[class][id]:after {
 /*background*/ shape-outside: radial-gradient(farthest-side at top left, transparent 100%, red 0);
}


/* extra */
body {
  background: #399;
  margin: 0;
}
<div>
  <div class=shape></div>
  <div class=shape id=idAttribute></div>
  Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Pel lentes que ultri cies. 
</div>

<div style="--s:20em">
  <div class=shape></div>
  <div class=shape id=idAttribute></div>
  Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Pel lentes que ultri cies. Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Pel lentes que ultri cies. Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Pel lentes que ultri cies. Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Pel lentes que ultri cies. Lorem ipsum dolor sit amet, eget orci. orci. rat ultri cies Pel lentes
</div>

我们可以添加一个额外的变量来模拟填充：

div:not([class]) {
/* em is to manage the text length and so is the font-sfamily and line-height */
  
  --s:10em; /*Size of the circle */
  --p:0px;  /*padding*/

  font-family:verdana;
  font-size:16px;
  line-height:1.25em;
  text-align:justify;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #333;
  color:#fff;
  display:inline-block;
  vertical-align:middle;
  margin:5px;
}

div[class]:before {
  content: '';
  float: left;
  clear: left;
  height: calc(var(--s)/2);
  width: calc(var(--s)/2);
  /*background*/ shape-outside: radial-gradient(farthest-side at bottom right, transparent calc(100% - var(--p)), red 0);
}

div[class][id]:before {
 /*background*/ shape-outside: radial-gradient(farthest-side at top right, transparent calc(100% - var(--p)), red 0);
}

div[class]:after {
  content: '';
  float: right;
  clear: right;
  height: calc(var(--s)/2);
  width: calc(var(--s)/2);
 /*background*/ shape-outside: radial-gradient(farthest-side at bottom left, transparent calc(100% - var(--p)), red 0);
}

div[class][id]:after {
 /*background*/ shape-outside: radial-gradient(farthest-side at top left, transparent calc(100% - var(--p)), red 0);
}


/* extra */
body {
  background: #399;
  margin: 0;
}
<div >
  <div class=shape></div>
  <div class=shape id=idAttribute></div>
  Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Pel lentes que ultri cies. 
</div>

<div style="--s:20em;--p:15px">
  <div class=shape></div>
  <div class=shape id=idAttribute></div>
  Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Pel lentes que ultri cies. Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Pel lentes que ultri cies. Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Pel lentes que ultri cies. Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. 
</div>

enter image description here

5
我已经创建了一个示例，展示了如何实现此功能。目前还没有简单的方法，但正如Spudley所提到的，它即将在不久的将来推出。http://jsfiddle.net/kUJq8/5/ 这个示例基于http://www.csstextwrap.com使用的相同概念，但我创建了这个示例来解释其中的原理以及如何实现这个效果。
基本上，您需要先创建您的圆形和一些示例文本，然后创建一组“虚拟”的浮动div，以给您的文本提供指导，以避免超过并自动换行到下一行。随意调整div的宽度，以便达到所需的效果。同时，如果您删除边框，您可以看到文本的真实外观。边框有助于设置div的宽度。
<div style="float:left;clear:left;height:15px;width:130px"></div>
<div style="float:right;clear:right;height:15px;width:130px"></div>

在我的示例中，我没有创建整个圆形，但这应该足以让您朝正确的方向前进。如果您需要进一步的帮助，请告诉我。谢谢。
这是很多个 div，但现在看起来它是唯一可行的解决方案。所以谢谢你！ - mschadegg
没错，这基本上就是我在回答的最后几段中试图描述的内容。虽然不是理想的解决方案，但在 CSS Shapes 获得良好的跨浏览器支持之前，这是你能得到的最接近的方法。 - Spudley
4

目前正在标准化的CSS功能被称为“CSS形状”。

（注：“CSS Shapes”是CSS特性规范的名称；不要与仅在CSS中创建非矩形形状混淆，您已经完成了）

CSS Shapes功能将完全实现您的要求-即允许您指定元素的形状，包括文本（和/或外部）应如何换行。

您可以在网络上的各种文章中了解更多信息。以下是您可能想阅读的一些文章：

你还可以在这里阅读W3C规范文档：http://dev.w3.org/csswg/css-shapes/

然而（这是一个很大的“然而”），这个特性在浏览器中并不普遍可用。它仍在经历规范过程，并且具有非常有限的浏览器支持。

同时，你所要求的实际上非常难以实现。你可能被迫使用一堆占位符元素来围绕你想强制文本流动的区域。虽然不理想，但在这个新规范开始得到广泛支持之前，这可能是你最好的选择。

CSS Shape是一个很棒的东西！对于这个正确的答案点赞！但是浏览器支持真的很弱。要测试你的浏览器，请访问此网站http://html.adobe.com/webplatform/layout/shapes/browser-support/。 - Michael Schmidt
不错的功能，但是当浏览器支持不足时有点无用。但还是感谢回答，期待浏览器支持更加强大！ - mschadegg
2

这是对@G-Cyr答案的扩展，我将考虑不同的语法和更少的代码。我还将依赖于shape-margin来定义文本的填充，而不是在渐变中使用复杂的计算。

div.box {
  --p: 0px; /*padding*/
  
  text-align: justify;
  width: 9em; /*Size of the circle */
  aspect-ratio: 1;
  border-radius: 50%;
}

.box > div {
  height: 100%;
}

.box:before,
.box > div:before {
  content: '';
  float: left;
  height: 100%;
  width: 50%;
  shape-outside: radial-gradient(farthest-side at var(--d, right), #0000 100%, #000 0);
  shape-margin: var(--p);
}

.box>div:before {
  float: right;
  --d: left;
}


/* Irrelevant styles*/
body {
  background: #399;
  margin: 0;
}

div.box {
  background: #333;
  color: #fff;
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  font-size: 20px;
}
<div class="box">
  <div> Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Pel lentes que ultri cies. cies. dolor ipsum</div>
</div>

<div class="box" style="width: 17em;--p:15px">
  <div> Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Pel lentes que ultri cies. Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Pel lentes que ultri cies. Lorem ipsum dolor sit amet, eget orci, tinci dunt place
    rat in sociis. Pel lentes que ultri cies. Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Lorem ipsum</div>
</div>

这很棒。你有想法如何在圆形内垂直居中文本吗？想象一个比文本更大的圆。目前，文本将从圆的开头开始。我知道的所有方法都不够好，因为它们会破坏形状外部功能。 - florian norbert bepunkt
@floriannorbertbepunkt 唯一的方法是在内部设置一个额外的div包装器的填充：https://jsfiddle.net/mp6qj93n/，但您必须手动查找该值，您可以使用JS。 - Temani Afif
1
我不确定这个解决方案有多可靠，但它很容易实现，并且他们有一个在圆形中显示文字的验证示例。请查看：CSS 文本环绕。
0

一个带有自己的类和ID，并且也适用于Safari的版本：

#container {
  --s: 400px;
  --p: 10px;
  font-family: verdana;
  font-size: 16px;
  line-height: 1.25em;
  text-align: justify;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #333;
  color: #fff;
  display: inline-block;
  vertical-align: middle;
  margin: 5px
}

.circle:after,
.circle:before {
  content: '';
  height: calc(var(--s)/2);
  width: calc(var(--s)/2)
}

.circle:before {
  float: left;
  clear: left;
  shape-outside: radial-gradient(farthest-side at bottom right, transparent calc(100% - var(--p)), red 0)
}

#shape:before {
  shape-outside: radial-gradient(farthest-side at top right, transparent calc(100% - var(--p)), red 0)
}

.circle:after {
  float: right;
  clear: right;
  shape-outside: radial-gradient(farthest-side at bottom left, transparent calc(100% - var(--p)), red 0)
}

#shape:after {
  shape-outside: radial-gradient(farthest-side at top left, transparent calc(100% - var(--p)), red 0)
}
<div id="container" style="--s:20em;--p:15px">
  <div class="circle"></div>
  <div class="circle" id="shape"></div>
  Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Pel lentes que ultri cies. Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Pel lentes que ultri cies. Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Pel lentes que ultri cies. Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis.
</div>

-1

在相应的行之前，您还可以添加一个带有不同缩进的元素；这就是我做的（在具有圆形左下角的div上溢出文本）

头部或样式表中的CSS：
#indent5 {padding: 0 0 0 5px;}
#indent20 {padding: 0 0 0 20px;}

正文中的html：
<div style="text-align: justify;">
<p> f&uuml;hrte und ihren ungl&uuml;ckseligen Sohn Ignatius, der schnell wieder wegen seines Dementoren&#8211;Zuchtprogramms<br>
<span id="indent5">seinen Posten verlassen musste. Besonders Wilhelmina</span><br>
<span id="indent20">Tuft war oft hier und brachte die Leute in </span><br>
</p>
</div>

通常情况下，文本是一个块，但最后两行分别缩进了5和20像素；您仍然需要为每一行都这样做，但我认为这比放置div元素更容易。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接