我想让我的圆形 div 将文本保留在其中。就像你在图片上看到的
如何使用 CSS 做到这一点？因为我的圆形 div 将具有像平方一样的文本。 http://jsfiddle.net/kUJq8/
div {
width: 320px;
height: 320px;
border-radius: 50%;
background: #333;
color: #FFF;
}
问问题
7339 次
6 回答
12
现在，shape-outside可能是一种选择：
https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside
shape-outsideCSS 属性定义了一个形状（可能是非矩形），相邻的内联内容应该围绕该形状进行环绕。默认情况下，内联内容环绕其边距框；shape-outside 提供了一种自定义此包装的方法，从而可以将文本包装在复杂的对象周围，而不是简单的框。
- 我们还必须注意浏览器对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>
这也是径向梯度的另一种语法：
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>
于 2019-06-06T21:10:01.547 回答
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>
在我的示例中，我没有创建整个圆圈，但它应该足以让您走上正确的轨道。如果您需要有关此想法的任何进一步帮助，请告诉我。谢谢。
于 2013-11-11T15:44:49.313 回答
4
目前有一个 CSS 功能正在标准化，称为“CSS Shapes”。
（注意：“CSS 形状”是 CSS 功能规范的名称；不要与在 CSS 中简单地创建非矩形形状的行为混淆，您已经完成了）
CSS Shapes 功能将完全满足您的要求——即允许您指定元素的形状，关于其内部（和/或外部）的文本应如何换行。
您可以在网络上的各种文章中了解有关它的更多信息。以下是您可能想阅读的一些内容：
您还可以在此处阅读 W3C 规范文档：http: //dev.w3.org/csswg/css-shapes/
但是（这是一个很大的“但是”），此功能尚未在浏览器中广泛使用。它仍处于规范过程中，并且对浏览器的支持非常有限。
同时，您所要求的实际上很难实现。您可能不得不求助于在您想要强制文本在它们周围流动的区域周围粘贴一堆间隔元素。不理想，但在这个新规范开始在浏览器中得到广泛支持之前，它可能和它所能得到的一样好。
于 2013-11-11T15:10:01.720 回答
2
我不确定这个解决方案有多强大，但它很容易实现，并且他们有一个经过验证的圆圈中的文本示例。检查：CSS 文本换行
于 2013-11-11T15:14:08.427 回答
0
这是@G-Cyr 答案的扩展，我将在其中考虑不同的语法和更少的代码。我还将依靠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>于 2019-12-25T19:35:02.197 回答
0
您还可以在具有不同缩进的相应行之前添加一个<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 元素更容易
于 2015-10-26T23:30:59.443 回答