How can I ensure that text is inside rounded div?

Question

I want to have my round div to keep the text inside it. like you see on the image

How can I do this using CSS? because my round div, will have the text like it was squared. http://jsfiddle.net/kUJq8/

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

Answer 1

I've created an example of how you can achieve this. There is not an easy way yet, but it's coming in the near future as Spudley mentioned. http://jsfiddle.net/kUJq8/5/

This example is based on the same concept used by http://www.csstextwrap.com but I created this example to explain what's going on and how to achieve this effect.

Basically, you need to create your circle first and some sample text, then create a set of "imaginary" floating div's to give your text guidelines to not exceed and automatically wrap to the next line. Feel free to play around with the widths of the div's so you can achieve the desired effect. Also, if you remove the border, you can see what the text actually looks like. The border helps when setting the widths of the div's.

<div style="float:left;clear:left;height:15px;width:130px"></div>
<div style="float:right;clear:right;height:15px;width:130px"></div>

In my example, I didn't create the whole circle, but it should be enough to get you going on the right track. Please let me know if you need any further assistance with this idea. Thanks.

Answer 2

Nowdays, shape-outside could be an option :

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

The shape-outside CSS property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap. By default, inline content wraps around its margin box; shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.

---

• We also do have to mind browser support for shape-outside

---

image, or gradient can be used to draw the shape to keep text away from.

For a circle, 4 pieces are needed that can be produce from pseudo elements.

• the idea is to start from a sized square box and 4 floatting pseudos with a radial-gradient background drawn outside the circle/center.

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>

• Now that we know that our radial-gradients are on the right spots, we can use them as shapes to push the text away from these areas. The gradients will not be drawn, only the shape will be used.

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>

Here is your fiddle revisited to play with https://codepen.io/gc-nomade/pen/zQVoWO

---

We can also consider CSS variables to make the code easy to adjust depending on the text content:

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>

Here is also another syntax for the 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>

We can then add an extra variable to simulate padding:

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 3

There is a CSS feature currently being standardised called "CSS Shapes".

(NB: "CSS Shapes" is the name of the CSS feature spec; not to be confused with the act of simply creating a non-rectangular shape in CSS, which you've already done)

The CSS Shapes feature will do exactly what you're asking for -- ie allow you to specify the shape of an element, with regards to how the text inside it (and/or outside it) should wrap.

You can learn more about it in various articles around the web. Here are a few you may want to read:

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

You can also read the W3C spec document for it here: http://dev.w3.org/csswg/css-shapes/

However (and this is is a big "however"), this feature is not widely available in browsers yet. It is still in the process of going through the specification process, and has very limited browser support.

In the meanwhile, what you're asking for is actually very difficult to achieve. You may be forced to resort to sticking a bunch of spacer elements around the area you want to force the text to flow around them. Not ideal, but until this new spec starts being widely supported in browsers, it's probably about as good as it's going to get for you.

Answer 4

I'm not sure how robust this solution is, but it's easy to implement and they have a proven example of the text in a circle. Check: CSS Text wrap