那些遇到过的问题

如何确保文本在舍入div内？

msc*_*egg 23 html css css3

我想让我的圆形div保留文本.就像你在图像上看到的那样 圆形div与文本内联

我怎么能用CSS做到这一点？因为我的圆形div,会有像平方的文字. http://jsfiddle.net/kUJq8/

div {
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: #333;
    color: #FFF;
}
Run Code Online (Sandbox Code Playgroud)

G-C*_*Cyr 12

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

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

的shape-outsideCSS属性定义的形状可以是非矩形的，在其周围相邻的内联内容应换行。默认情况下，内联内容环绕其边距框；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;
}
Run Code Online (Sandbox Code Playgroud) 
<div>
  <div class=shape></div>
  <div class=shape id=idAttribute></div>
</div>
Run Code Online (Sandbox Code Playgroud)

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

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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明

这是您重新访问的小提琴，以使用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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明

这也是径向梯度的另一种语法：

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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

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

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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明

How*_*let 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>
Run Code Online (Sandbox Code Playgroud)

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

归档时间：

查看次数：

4080 次

最近记录：

6 年，3 月 前
使用CSS的圆圈中的文本段落 24
更多相关链接
相关归档
Firefox 4所需的输入形式为RED边框/轮廓 55
如何结合:第一个孩子和:悬停？ 48
data-toggle属性如何工作？(它的API是什么？) 46
在什么情况下,flex-shrink适用于flex元素,它是如何工作的？ 39
为什么max-width不覆盖min-width？ 37
@ font-face:FF中的粗体比Chrome中的粗体更大 19
平滑地停止CSS关键帧动画 14
如何在非CSS3浏览器上制作圆角？ 4
如何删除选择框的选项蓝色边框颜色 2
css - 以徽标为中心 1
难疑归档
如何让Git"忘记"一个被跟踪但现在位于.gitignore的文件？ 4888
如何水平居中<div>？ 4116
.prop()vs .attr() 2249
单身人士有什么不好的？ 1931
在Node.js中编写文件 1538
从JSON文件中解析值？ 1400
[Flags]枚举属性在C#中意味着什么？ 1383
静态只读与const 1349
自定义HTTP标头:命名约定 1051
在Notepad ++中将制表符转换为空格 1042