Using CSS to encompass a group of words within a circular shape

Question

Using CSS to encompass a group of words within a circular shape

I am attempting to encircle multiple words within one circle, but currently each word is enclosed in its own circle. Below is the code I am currently using.

HTML
<div class="numberCircle">
    <span>Circle all words</span>
</div>

CSS
.numberCircle {
    display: inline-block;
    line-height: 0px;
    
    border-radius: 50%;
    border: 2px solid;
    
    font-size: 32px;
}

.numberCircle span {
    display: inline-block;
    
    padding-top: 50%;
    padding-bottom: 50%;
    
    margin-left: 8px;
    margin-right: 8px;
}

html css

Answer 1

Answer №1

You currently have two "span" tags in your markup, one with a class and one without. To avoid redundancy, delete the tag without the class and add the CSS styles to the remaining tag:

<span class="class"> words </span>

For adding multiple words within this class, use the following structure:

<span class="class"> <div> word 1</div>  <div> word 2</div> <div> word 3</div></span>

This will ensure all divs within the span have the same class for consistency in styling.

Answer 2

You currently have two "span" tags in your markup, one with a class and one without. To avoid redundancy, delete the tag without the class and add the CSS styles to the remaining tag:

<span class="class"> words </span>

For adding multiple words within this class, use the following structure:

<span class="class"> <div> word 1</div>  <div> word 2</div> <div> word 3</div></span>

This will ensure all divs within the span have the same class for consistency in styling.

Answer 3

Answer №2

To easily achieve a circular number design, simply wrap your text with an element and apply the .numberCircle class to that element.

HTML

<div class="numberCircle">
    <span>Circle</span>
    <span>around</span>
    <span>text</span>
</div>

CSS

.numberCircle {
    display: inline-block;
    line-height: 0px;
    border-radius: 50%;
    border: 2px solid;
    padding: 20px; /* Add spacing around the edges */
    font-size: 32px;
}

.numberCircle span {
    display: inline-block;
    padding: 50% 0; 
    /* No need for margins in this case */
}

Check out an example of this in action here: https://jsbin.com/hekehatabu/1/edit?html,css,output

Answer 4

To easily achieve a circular number design, simply wrap your text with an element and apply the .numberCircle class to that element.

HTML

<div class="numberCircle">
    <span>Circle</span>
    <span>around</span>
    <span>text</span>
</div>

CSS

.numberCircle {
    display: inline-block;
    line-height: 0px;
    border-radius: 50%;
    border: 2px solid;
    padding: 20px; /* Add spacing around the edges */
    font-size: 32px;
}

.numberCircle span {
    display: inline-block;
    padding: 50% 0; 
    /* No need for margins in this case */
}

Check out an example of this in action here: https://jsbin.com/hekehatabu/1/edit?html,css,output

Answer 5

Answer №3

To encircle specific words, place them within a DIV element with the class numberCircle.

 <div class="numberCircle">
    <div>Highlight</div>
    <div>the</div>
    <div>desired</div>
 </div>

Answer 6

To encircle specific words, place them within a DIV element with the class numberCircle.

 <div class="numberCircle">
    <div>Highlight</div>
    <div>the</div>
    <div>desired</div>
 </div>

Using CSS to encompass a group of words within a circular shape

Answer №1

Answer №2

Answer №3

Similar questions

Enhancing the appearance of the bootstrap fixed navbar with additional elements above and below

Steer clear of downloading images while on your smartphone

"Clicking on a child link within a Bootstrap5 dropdown causes the dropdown menu

Angular 2+ with Customized Styles for Different Users

What are the choices for the active element in a bootstrap navbar?

Tips for Creating an Upward-Dropping Dropdown Menu in HTML/JavaScript When Space is Limited on the Page

Ways to modify the gap between buttons using CSS

The hover effects in CSS3 create unexpected interactions with surrounding elements in Chrome

Turn the flipcard hover effect into an onclick action

The button on the Cookie Policy navigation window is no longer operational on the ASP.NET Core MVC website utilizing Bootstrap version 4.3.1

Filtering HTML with HtmlAgilityPack using custom queries

Ajax: The requested resource does not have the 'Access-Control-Allow-Origin' header. As a result, access is not permitted from origin 'null'

Adding data to the SharePoint RichText Control using the WinForms WebBrowser Control

Change the <base> element programmatically during server-side rendering

How to set DIVS to be hidden when the page first loads

Updating the navigation with a dynamic CSS class using jQuery

The deletion feature on my virtual keyboard was malfunctioning when using JavaScript

Ways to deselect checkboxes and eliminate validation requirements

Experiencing a problem with Datatables where all columns are being grouped together in a single row

Flameflare/Console-inspired hover animation