How to Ensure That Text Is Inside Rounded Div

How can I ensure that text is inside rounded div?

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.

How to add text into rounded rectangle separating by a circle

I think what you have will mostly work, just change the line height to 1em or something.

Here was my attempt. I also added 'top' and then 'left' or 'right' to move away from the edges with absolute positioning. I also used text-align for each paraDiv sections:

.mainInfo{
    background-color: #fff;
    border: .01rem round #e0e1ed;
    border-radius: 20px;
    color: #585CA1;
    width:100%;
    height:5em;
    box-shadow: 0px 0px 17px -5px rgba(0,0,0,0.75);
    margin-top: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle {
    position: relative;
    left:20%;
    width: 9em;
    height: 9em;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0px 0px 17px -5px rgba(0,0,0,0.65);
}

.circle img {
    position: absolute;
    max-width: 85%;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
}

.paraDivLeft,
.paraDivRight {
    position: absolute;
    display: inline-block;
    padding: 10px;
}

.paraDivLeft {
    left: 20px;
    top: 40px;
    text-align: left;
}

.paraDivRight {
    right: 20px;
    top: 50px;
    text-align: right;
}

.paraDivLeft h6 {
    font-size: 14pt;
    margin: 0;
}

.paraDivLeft p,
.paraDivRight p {
    line-height: 1em;
    font-size: 12pt;
    margin: 0;
}

<div class="col-12 p-5 mb-3">
    <div class="mainInfo">
        <div class="circle">
            <img src="larger-logo.png"> 
        </div>
        <div class="paraDivLeft">
            <h6>Site Name</h6>
            <hr>
            <p>www.sitename.com</p>
            <p>info@sitename.com</p>
        </div>
        <div class="paraDivRight">
            <p>Address</p>
            <p>Postal Code</p>
            <p><strong>Phone Number</strong></p>
        </div>
    </div>
</div>

Pentagon div with dynamic text inside

It is all about to play with the horizontal and vertical percentage of clip path given. I have updated your clip path like below and ended with some curved shape.

clip-path: polygon(0% 0%, 81% 0%, 82% 1%, 83% 2%, 84% 3%, 85%  5%, 100% 50%, 89% 96%, 88% 98%, 87% 99%, 86% 100%, 85% 100%, 0% 100%);

.b {
  background-color:red;
  border-radius: 10px;
  clip-path: polygon(0% 0%, 81% 0%, 82% 1%, 83% 2%, 84% 3%, 85%  5%, 100% 50%, 89% 96%, 88% 98%, 87% 99%, 86% 100%, 85% 100%, 0% 100%);
  padding: 20px;
}

.a {
  width: 200px;
  border: 1px solid black;
}

<div class="a">
<div class="b">
  asd asd asd asdasd<br>
  asd asd asd asdasd<br>
  asd asd asd asdasd<br>
  asd asd asd asdasd<br>
  asd asd asd asdasd<br>
  asd asd asd asdasd<br>
  asd asd asd asdasd<br>
</div>
</div>

Center text in div with border-radius

It can be achieved simply by setting height/width of divs and a line-height which is equal to the height in order for vertical alignment.

text-align: center will do the horizontal alignment.

div {    display: inline-block;    text-align: center;    /* width: 10%; */    /* border: 1.2em solid #dddddd; */    background-color: #ddd;    width: 2.4em;    height: 2.4em;    line-height: 2.4em;    border-radius: 50%;    /* max-width: 1.2em; */    /* max-height: 1.2em; */    /* box-sizing: border-box; */        /* margin: 0 auto; */}

<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>

How to draw a circle with text in the middle?

Setting a line-height the same value as the height of the div will show one line of text vertically centered. In this example the height and line-height are 500px.

Example

JSFiddle

.circle {
  width: 500px;
  height: 500px;
  line-height: 500px;
  border-radius: 50%;
  font-size: 50px;
  color: #fff;
  text-align: center;
  background: #000
}

<div class="circle">Hello I am A Circle</div>

How to make rounded div length based on the text within it?

JSFiddle

Take away the width and replace it with:

display:inline-block;

It looks like it doesn't fit because it's at the top, but if you put in the style:

In the case you want, you need some javascript:

JSFiddle

You need to delete the height css attribute, then get the width of the box and set the height of it the same to make it a circle.

var round = document.getElementsByClassName("roundText")[0];
var width = round.offsetWidth;
round.style.height = width+"px";

Then if you want the text to be central (in both height and width), you can add this style:

text-align:center;

However, because javascript is making the height dynamically, you need to add more JS to set the line height.

Which is:

round.style.lineHeight = width+"px";

JSFiddle

how to make div more round

You have to add display : inline-flex to your span, and set border-radius to 25px and it will work

  <div *ngIf="message.type === 'appeal'" class="first-message">
        <span class="chat-open" > 
<span class="chat-open-text" >Чат открыт</span>
 <span>{{message.date| date: 'dd.MM.yyyy HH:mm'}}</span> </span>
     </div>

.first-message {
    
  margin-top: 10%;
  margin-bottom: 10%;
  display: block;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
 }   
.chat-open-text {
 border-radius: 25px;
    background-color: #F03E3E !important;
    color: white;
    margin-right: 5%;
    padding: 10px 30px;
    display: inline-flex;
  
}

How to Ensure That Text Is Inside Rounded Div

How can I ensure that text is inside rounded div?

How to add text into rounded rectangle separating by a circle

Pentagon div with dynamic text inside

Center text in div with border-radius

How to draw a circle with text in the middle?

Example

How to make rounded div length based on the text within it?

how to make div more round

Related Topics

Leave a reply