Tips for arranging letters on separate lines using CSS

I have a set of four divs that display numbers, and I want to show the corresponding words below each number. Despite trying to use the p tag with white-space: pre; in CSS, I have not been successful:

#c {
  padding-top: 30px;
  padding-bottom: 30px;
}

.cnum {
  background: black;
  border-radius: 5px;
  color:white
  padding: 15px;
  margin: 5px;
  font-size: 20px;
}

p {
  white-space: pre;
}
<div id="c">
  <span class='cnum'>27 Text1</span><span class='cnum'>10 Text2</span><span class='cnum'>40 Text 3</span><span class='cnum'>5 Text 4</span>
</div>

htmlcss

Answer №1

HTML

<div id="c">
   <div class='cnum'>27 <br/>Text1</div>
   <div class='cnum'>10 <br/>Text2</div>
   <div class='cnum'>40 <br/>Text 3</div>
   <div class='cnum'>5 <br/>Text 4</div>
 </div>

CSS

#c{
    padding-top:30px;
    padding-bottom:30px;
}
.cnum{
    background: black;
    border-radius: 5px;
    color: #fff;
    padding: 15px;
    margin:5px;
    font-size:20px;
    max-Width :100px;
    float :left
 }

Check out this CodePen example!

Answer №2

If you find yourself unable to make changes to the HTML code, there's a clever workaround that involves utilizing the word-spacing property. It's important to note that this method has its limitations...

#c {
  padding-top: 30px;
  padding-bottom: 30px;
}

.cnum {
  background: black;
  border-radius: 5px;
  color: #fff;
  padding: 15px;
  margin: 5px;
  font-size: 20px;
  display: inline-block;
  width: 100px;
  word-spacing: 100px; 
}
<div id="c">
  <span class='cnum'>27 Text1</span><span class='cnum'>10 Text2</span><span class='cnum'>40 Text3</span><span class='cnum'>5 Text4</span>
</div>

Answer №3

I have organized the elements based on their hierarchy to facilitate the application of styles. While I have maintained the span tags, you could consider replacing them with block elements for better structure.

It would be beneficial for you to explore the differences between inline and block HTML elements and learn how to convert one into the other effectively.

I trust that my contribution has been helpful.

#c {
  padding-top: 30px;
  padding-bottom: 30px;
}

.cnum {
  background: black;
  border-radius: 5px;
  color: #fff;
  padding: 15px;
  margin: 5px;
  font-size: 20px;
  display: inline-block;
  text-align: center;
}

.cnum span{
  display: block;
}

p {
  white-space: pre;
}
<div id="c">
  <div class="cnum">
    <span>27</span>
    <span>Text 1</span>
  </div>
  <div class="cnum">
    <span>10</span>
    <span>Text 2</span>
  </div>
  <div class="cnum">
    <span>40</span>
    <span>Text 3</span>
  </div>
  <div class="cnum">
    <span>5</span>
    <span>Text 4</span>
  </div>
</div>

Answer №4

For those with the ability to modify HTML, there is an opportunity to customize the appearance of numbers using the pseudo selector ::first-line.

#c {
  padding-top: 30px;
  padding-bottom: 30px;
}

.cnum {
  background: black;
  border-radius: 5px;
  color: #fff;
  padding: 15px;
  margin: 5px;
  font-size: 20px;
}

.cnum::first-line {
  font-size: 30px;
  color: yellow;
}
<div id="c">
   <div class='cnum'>27 <br/>Text1</div>
   <div class='cnum'>10 <br/>Text2</div>
   <div class='cnum'>40 <br/>Text 3</div>
   <div class='cnum'>5 <br/>Text 4</div>
 </div>

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

Issue with excessive content causing scrolling difficulty

I've created CSS for a modal dialog, but I'm facing an issue. When the content exceeds the vertical space of the wrapper, the scrolling functionality doesn't work correctly. Although I can scroll, it's limited and I can't reach th ...

htmlcss

When the page is scrolled to 50 pixels, a modal pop-up will appear

I attempted to use cookies to store a value when the user clicks on a popup to close it, ensuring that the popup does not show again once closed. However, I am encountering an issue where the popup continues to open whenever I scroll, even after closing it ...

javascriptjqueryhtmltwitter-bootstrap-4

Adjusting table dimensions according to webpage dimensions

When looking at the image below, you will notice a div that contains a table with some content. However, when resizing the web browser's page, the table goes beyond the boundaries of the div. My goal is to reduce the size of the table as it scales do ...

htmlcsshtml-table

Tips for utilizing a particular style from a font collection?

I am currently in the process of building my first website and I am experimenting with different fonts available on fontsquirrel. However, I am encountering an issue where I am only able to utilize certain fonts that I have downloaded from the site. One ...

htmlcssfonts

Tips for optimizing HTML5 markup elements to render effectively in Internet Explorer

How can I ensure that HTML5 markup elements such as <header>, <section>, and <footer> are displayed properly in Internet Explorer? I've noticed that when I apply CSS to these elements, the styling doesn't always work as expecte ...

csshtmlcss-selectorsmarkup

Challenges arise when trying to load CSS on an EJS page in conjunction with using res.redirect()

When using Express with EJS, my base route is set as follows: router.get("/", productsData.getProducts); The "productsData" is sourced from my controllers page and the code snippet within that page is as follows: exports.getProducts = (req, res, next) => ...

javascriptcssnode.jsexpressejs

Create images from HTML pages with the help of Javascript

Hello there, UPDATE: I am looking to achieve this without relying on any third-party software. My application is a SAP product and installing additional software on every customer's system is not feasible. The situation is as follows:   ...

javascripthtmlimagesap-bsp

Retrieve the genuine HTML code for a control directly on the client side

My goal is to retrieve the complete HTML text for a control from the client browser. This is important because certain information, especially the "Style," does not appear on the server side. How can I obtain the entire HTML text for a control? ...

c#htmlasp.net

How can you ensure an element's height matches its width within an Ionic framework?

I am currently creating an application using the Ionic framework, and I am looking to set a square image as the background. The challenge is to ensure that the image scales appropriately for different screen resolutions; ideally, it should occupy the full ...

javascriptcssangularjsangularjs-directiveionic-framework

Prevent text wrapping and clear floats in a clean and hack-free way

I am currently in the process of compiling a collection of blurbs accompanied by images that can be easily integrated into any section of our website. My goal is to ensure that these blurbs are versatile, free from rigid width specifications, and compatibl ...

csscss-float

Steps for Removing Multiple CSS Styles from an Element's Style:

When my application generates inline styles, I sometimes need to remove the height, width, and max-width styles from certain elements. I have identified the element using this code: const elems = window.$('.myElements'); window.$.each(elems ...

javascriptjquerycss

Is it advisable to avoid using `&apos;` for escaping single quotes?

According to the insights shared in conversations about the popularity of single quotes in HTML and Jquery embedded quote in attribute, the Wikipedia page on HTML highlights that: The use of the single-quote character ('), as a way to quote an attri ...

htmlescapingquotes

What is the best way to update a specific column value in a table using AngularJS?

How can I achieve opening a specific row's text-area when clicking the "Add_Note" button inside a table column, without affecting all other rows? I want to show them using index value while using ng-repeat. var myApp = angular.module('myApp&ap ...

javascripthtmlangularjs

What could be the reason behind the link only functioning properly on macOS?

I tried accessing a link that works perfectly on Chrome, Safari, and Firefox on MacOS, but when I try to access it from Windows or Android, I get a 404 error in the browser. Here is an example link: This link is part of an m3u8 file, which can be accesse ...

htmlmacosoperating-system

dealing with a problem with the bootstrap navigation bar concept

I’ve been struggling to align the menu and company name in a single row. Initially, I tried setting the company name followed by some spaces before adding the menu items, but it didn't work out as expected. I've been spending the last couple of ...

htmlcssbootstrap-4

Tips for creating a textfield with height that responds dynamically in Material UI

I am trying to create a textfield with a responsive height that adjusts itself based on the size of its parent grid when the browser window is resized. I have been searching for a solution and came across this helpful post on Stack Overflow about creating ...

cssreactjsmaterial-ui

Combining Node and React: Using CSS Class Names with Hyphens

Currently, my project utilizes react-starter-kit and includes several react components, each with its own styling file (scss). Every component imports the styling file at the top like this: import s from './Header.scss'; When it comes to using ...

cssnode.jsreactjssassbabeljs

Modify the color of a unique word within a cell in a gridview

How can I change the color of specific keywords in a gridview cell without affecting all words? Here is the sample code: protected void gvContents_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) ...

c#cssasp.netgridviewcolors

I am having trouble getting my textarea to accept width attributes

Strangely, the text area on my website just won't cooperate with the width I specify. I've double-checked the CSS multiple times to no avail! Take a look at this jsfiddle example that demonstrates what I'm trying to achieve. However, on my ...

htmlcsstextarea

When a custom icon is clicked in the vue-select dropdown, the custom method is not activated

In my current project, I am creating a vue-component based on vue-select. Within this component, I have added a custom info Icon. The issue I am facing is that when the user clicks on the Icon, instead of triggering my custom method getInfo, it opens the s ...

javascriptcssvue.jstailwind-cssvue-select