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

时间：2013-11-11 14:55:29

标签： css css3 html

我想让我的圆形div保留文本。就像你在图像上看到的那样 Round div with text inline

如何使用CSS执行此操作？因为我的圆形div，会有像平方的文字。 http://jsfiddle.net/kUJq8/ 

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

8 个答案:

答案 0 :(得分：2)

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

（ NB：“CSS Shapes”是CSS特征规范的名称;不要与简单地在CSS中创建非矩形形状的行为相混淆，你已经完成了 ）

CSS Shapes功能将完全符合您的要求 - 即允许您指定元素的形状，关于其内部（和/或其外部）的文本应如何包装。

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

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

然而（这是一个很大的“但是”），这个功能在浏览器中还没有广泛使用。它仍处于完成规范过程的过程中，并且浏览器支持非常有限。

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

答案 1 :(得分：2)

我已经创建了一个如何实现这一目标的示例。目前还没有一个简单的方法，但是在斯普德利提到的不久的将来它即将到来。 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>

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

答案 2 :(得分：2)

如今，shape-outside可能是一种选择：

  

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

     

shape-outside CSS属性定义了一个形状（该形状可以是非矩形的），相邻的内联内容应围绕该形状包装。默认情况下，内联内容环绕其边距框； 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>

enter image description here

以下是您的小提琴，可以和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

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

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

答案 3 :(得分：1)

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

答案 4 :(得分：0)

你还可以添加一个<span> - 元素bevor各自的行与不同的缩进;这就是我的做法（左边有一个圆角的div，文字在那边溢出）

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

html in body：
<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元素更容易

答案 5 :(得分：0)

这是@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>

答案 6 :(得分：-1)

仅使用一条规则的一种可能方式：basic-shape。

这只是一个遮罩，部分文字被隐藏了。 

<div class="circular">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
</div>
<Icon />

答案 7 :(得分：-4)

您可以尝试使用overflow：hidden;

相关问题
最新问题