Creating circular text wrapping inside a CSS-drawn circle

My current CSS code is designed to create circular shapes:

.circle {
    background: #f00;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    line-height: 100px;
    margin:5px;
}

By utilizing this code in html, I am able to generate three circles placed next to each other with text enclosed inside them:

<div class="circle">Text1</div>
<div class="circle">Text2</div>
<div class="circle">Text3</div>

resulting in the following layout:

https://i.sstatic.net/yWWOl.png

However, when attempting to add more text inside the second circle, the text overflows as shown below:

<div class="circle">Text1</div>
<div class="circle">Text2 and more</div>
<div class="circle">Text3</div>

https://i.sstatic.net/cZvKm.png

I am seeking a solution where 'Text2 and more' can remain within the confines of the second circle while wrapping around. How can this be accomplished?

It is important to note that I prefer not to use display: table-cell since it does not respond well on various screen sizes and might disrupt the overlapping arrangement of circles on narrow viewport pages.

htmlcssgeometryword-wrap

Answer №1

If you're looking to improve the appearance of your text, adjusting the line-height may be the solution you need. This code snippet can help center your text effectively, but feel free to customize the height, width, and padding as needed. Remember, the padding should ideally be 25% of the height.

<div class="circle">
  <div class="text">
    hello world i am a circle
   </div>
</div>
<div class="circle">
  <div class="text">
    hello world
   </div>
</div>
<div class="circle">
  <div class="text">
    hello superman i am a red sun
   </div>
</div>

.circle {
    background: #f00;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    margin:5px;
    overflow:hidden;
    padding:25px;
    position:relative;
}
.text{
  transform:translate(-50%,-50%);
  position:absolute;
  top:50%;
  left:50%;
}

Answer №2

The issue with the spacing is due to the line-height property. I've made some adjustments to your CSS code to fix this.

circle span {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
}
circle {
  background: #f00;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  margin: 5px;
  position: relative;
}
<circle><span>Text 1</span></circle>
<circle><span>Text 2 and more</span></circle>
<circle><span>Text 3</span></circle>

Answer №3

The current line-height is causing an odd offset. Consider using flexbox to properly center the text inside the circle.

<div class="circles">
    <circle>Text1</circle>
    <circle>Text2 has longer text</circle>
    <circle>Text3</circle>
</div>

.circles{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
circle {
    display: flex;
    margin:5px;
    justify-content: center;
    align-items: center;
    background: #f00;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    border-radius: 50%;
    text-align: center;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Next.js in conjunction with Tailwind CSS and the shadcn/ui library to tackle the issue of preventing overscroll from creating

As I delve into a Next.js project, my goal is to use Tailwind CSS to craft an interface featuring a sidebar on the left, a header at the top, and a main content area. However, an issue has surfaced where users can over-scroll, leading to a blank space appe ...

cssnext.jstailwind-cssshadcnui

Repeated ng without any HTML elements this time

I'm trying to achieve the following output: Line 1<br> Line 2<br> Line 3<br> Line 4<br> Line 5<br> I want to use ng-repeat to display these lines with only <br> separating them. ...

htmlangularjsrepeater

Creating a Custom Progress Bar with Bootstrap

I'm encountering an issue with aligning a Bootstrap 3 progress bar vertically within a table cell. While I have successfully aligned other cells to the middle, the progress bar still remains in its original position. How can I eliminate the excess spa ...

htmlcsstwitter-bootstrap

I am concerned about the security of my games as they can be easily hacked through right-click inspect. What measures can

As a newcomer to game development, I am creating web games using JS, HTML, and CSS. However, I have encountered an issue with preventing right-click inspect hacking, which has led to people hacking my games through this method. I am wondering, how can I s ...

javascriptphpjqueryhtml

Enhancing user experience by implementing AJAX in a contact form to eliminate the need for page

I have read numerous questions on this topic and have compiled the code I currently have from various responses. Unfortunately, despite my efforts, I am unable to make it work and I cannot identify the reason behind this issue. Below is the HTML form str ...

javascriptphpjqueryhtmlajax

Animation of width with delay in CSS text alignment

I've been attempting to add an animation effect to my text so that it appears from left to right when the page loads. To achieve this, I have set up @keyframes to transition the text from 0% max-width to 100%. However, I'm facing an issue where ...

htmlcsscss-animationstext-align

How to automatically close a Bootstrap modal after submitting a form

I am facing an issue with a Bootstrap modal dialog that contains a form. The problem is that when I click the submit button, the form is successfully submitted but the modal dialog does not close. Here is the HTML code: <div class="modal fade" ...

javascripthtmljquerybootstrap-modal

What makes CSS Overflow: hidden toggle from working initially to suddenly not working?

There seems to be an issue with the code below - it works fine initially, but as soon as I tweak the height values for .Image, it stops functioning as expected. The test image starts overflowing instead of staying hidden, and no matter how many times I a ...

htmlcss

Modifying a picture with a click of a button in JavaScript

I am currently working on a program that allows for the progression through a series of images by changing the array number to correspond with the saved file name. For example: coolimg.1.jpg coolimg.2.jpg coolimg.3.jpg and so on... I have attempted to im ...

javascripthtmlarraysimagebutton

Trying to reduce the cursor box area within an A link containing a div box

My communication skills are lacking, so I have included an image to better illustrate my issue. Here is the problem .body { text-align: center; display: flex; flex-direction: column; align-items: center; } .flex-container { display: flex; ...

htmlcss

What is the best way to position images and URLs in div elements using CSS?

Currently, I am on a journey to become a Front End Developer through Udacity. As part of my learning process, I have a project that needs to be submitted. Unfortunately, I encountered some issues that I couldn't resolve on my own. Specifically, I&apos ...

htmlcss

Utilizing the power of SimpleHTMLDom to retrieve high-resolution images through an advanced Google search

I want to display a large image that was retrieved from Google using simple_html_dom.php include_once( "simple_html_dom.php" ); $key="unique"; $html = new simple_html_dom(); $html=file_get_html('http://images.google.com/images?as ...

phphtmldom

When the screen becomes responsive, elements escape from the div

I'm encountering an issue with the code block below. When attempting to make the screen responsive, the elements within the aircard div are not stacking as expected. Instead, they seem to overflow. I'm unsure of the reason for this behavior and h ...

htmlcssbootstrap-4responsiveresponsiveness

What Are The Steps to Ensure My HTML CSS Code has an Effective Navigation Dropdown Menu?

Seeking Help with Navigation Dropdown Menu Functionality, as a Beginner Facing Challenges in Understanding I've Put in a Lot of Effort to Make It Work Correctly, but I'm Struggling. Any Solutions and Tips would be greatly Appreciated. ...

htmlcssdrop-down-menunavigation

"Implementing a Chunked Approach to Adding Elements to the Document

Dealing with a large collection fetched from the server, I am tasked with creating DOM elements for each row in the collection. When attempting to append the items to the DOM using a for loop, my browser experiences lag time. To address this issue, I atte ...

javascripthtmldom

Center your wordpress site title next to your logo

My logo and website title are not aligned correctly on my site. The current setup looks like this: https://i.sstatic.net/3dUiN.png After examining the HTML generated by WordPress, I found the following snippet: <div id="logo" class="clearfix"> ...

htmlcsswordpresswordpress-theming

The Webix component is experiencing a lack of refreshment

function refresh_group_items(){ //console.log("calling1"); window.setTimeout(function(){ $$("cfg").reconstruct() }, 3000); } $.ajax({ type: "POST", xhrFields:{ withCredentials: true }, beforeSend: function(reque ...

javascripthtmlajaxwebix

Scrolling Object Fixed (CSS)

I have a question that I need help with. I have some basic knowledge of CSS and jQuery, and I'm trying to add a Facebook like button to my webpage. My goal is to make the button stick to the top of the page when the viewer scrolls down, and return to ...

javascriptjqueryhtmlcss

Methods for updating an image in Angular at a specified time interval?

Currently, I have an image and some counters. Once the total of the counters surpasses 500, I need to display a different image instead. This is what my template looks like: <img src="./assets/noun_Arrow_green.png" alt="Forest" styl ...

javascripthtmlangulartypescript

Logging client side errors to the server with AngularJS exclusively

Hey there, I'm a beginner in angularjs and I am trying to figure out how to create a client-side error/exception logger (.log/.js) file that sends data to the server using only angularjs. I prefer not to use jquery for this particular task. Any assis ...

angularjshtmlcss