如何确保文本在圆角 div 内？

Question

我想让我的圆形 div 将文本保留在其中。就像你在图片上看到的

如何使用 CSS 做到这一点？因为我的圆形 div 将具有像平方一样的文本。 http://jsfiddle.net/kUJq8/

div {
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: #333;
    color: #FFF;
}

Answer 1

目前有一个 CSS 功能正在标准化，称为“CSS 形状”。

(注意：“CSS Shapes”是 CSS 功能规范的名称；不要与在 CSS 中简单地创建非矩形形状的行为混淆，您已经完成了 )

CSS 形状功能将完全满足您的要求 - 即允许您指定元素的形状，以及元素内部（和/或外部）的文本应如何换行。

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

• The CSS Shapes Module will Revolutionize Web Design
• Using CSS Shapes to Enhance Visual Storytelling
• Reshaping the web with CSS shapes & exclusions

您也可以在此处阅读 W3C 规范文档：http://dev.w3.org/csswg/css-shapes/

但是（这是一个很大的“但是”），此功能尚未在浏览器中广泛使用。它仍处于规范过程中，对浏览器的支持非常有限。

与此同时，您所要求的实际上很难实现。您可能不得不求助于在您想要强制文本在它们周围流动的区域周围粘贴一堆间隔元素。不理想，但在这个新规范开始在浏览器中得到广泛支持之前，它可能会和它为您提供的一样好。

Answer 2

我不确定这个解决方案有多强大，但它很容易实施，而且他们有一个经过验证的圆圈中的文本示例。检查：CSS Text wrap

Answer 3

我已经创建了一个示例来说明如何实现这一点。目前还没有一个简单的方法，但正如 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>

在我的示例中，我没有创建整个圆圈，但它应该足以让您走上正确的轨道。如果您需要有关此想法的任何进一步帮助，请告诉我。谢谢。

Answer 4

您还可以在具有不同缩进的相应行之前添加<span>-Element；这就是我所做的（有一个带有圆形左下角的 div，并且文本在那一侧溢出）

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

正文中的html：
<div style="text-align: justify;">
<p> führte und ihren unglückseligen Sohn Ignatius, der schnell wieder wegen seines Dementoren–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 元素更容易

Answer 5

现在，shape-outside 可能是一种选择：

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

shape-outside CSS 属性定义了一个形状（可能是非矩形），相邻的内联内容应该环绕该形状。默认情况下，内联内容环绕其边距框； shape-outside 提供了一种自定义这种环绕方式的方法，可以将文本环绕在复杂对象而不是简单的框上。

---

• 我们还必须注意浏览器对shape-outside 的支持

---

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

对于一个圆圈，需要 4 个可以由伪元素生成的部分。

• 我们的想法是从一个大小合适的方形框和 4 个浮动伪对象开始，并在圆/中心之外绘制一个 radial-gradient 背景。

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>

这也是径向渐变的另一种语法：

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>

Answer 6

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

div.box {
  --s:9em;  /*Size of the circle */
  --p:0px;  /*padding*/

  text-align:justify;
  height: var(--s);
  width: var(--s);
  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), transparent 100%, red 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="--s: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>