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

Create animated changes in height for a mdDialog as elements are shown or hidden

Utilizing Angular Material, I have implemented tabs within an md-dialog. The dialog smoothly adjusts its height based on the content of the active tab during navigation. However, when utilizing an ng-if directive to toggle visibility of content, there is n ...

cssangularjsangular-material

Position the select tag adjacent to the textbox

Looking for assistance on how to arrange the <select> tag beside the "Desired Email Address" field within my email registration form. I believe a modification to the CSS code is necessary. Below you will find the HTML and CSS (snippet) related to th ...

htmlcss

Having issues with AJAX and button submit while trying to upload a file using Flask

I've been attempting to incorporate a file upload feature (specifically a .csv file) using bootstrap, and then submit it by clicking on a button. I've experimented with various methods to implement the file upload functionality, but haven't ...

javascripthtmlajaxflask

Consistently scaling the Embla carousel slides for a seamless presentation experience

In my current project, I am utilizing Embla Carousels and aiming to incorporate a smooth slide scaling effect as users scroll through. The idea is for slides to enlarge the closer they get to the left edge of the carousel container, then decrease in size r ...

javascripthtmlreactjstypescriptembla-carousel

Arranging nested divs in relation to one another in a specific position

This code represents a chart in HTML. The goal is to have the second (middle) div start where the first (top) div ends, which has a width of 75px. To achieve this, the margin-left for the middle div is set to 75px in the following styles. Following the sam ...

htmlcss

The smooth transition of my collapsible item is compromised when closing, causing the bottom border to abruptly jump to the top

Recently, I implemented a collapsible feature using React and it's functioning well. However, one issue I encountered is that when the collapsible div closes, it doesn't smoothly collapse with the border bottom moving up as smoothly as it opens. ...

javascriptcssreactjssassstyled-components

When completing a form submission, make sure to eliminate the %5B%5D from the

Whenever I submit a form with multiple checkboxes that share the same name, the resulting URL format is as follows: www.example.com/search.php?myvalue%5B%5D=value1&myvalue%5B%5D=value2 Is there a method to eliminate the %5B%5D in the URL and make it m ...

phphtmlformsurl-rewriting

The CSS attribute selector is unable to target dynamically appended class names

Utilizing React's CSS animations add-on has been a seamless process, with everything running smoothly when using the provided classnames. .quote-enter { opacity: 0.01; transition: opacity .25s ease-in; } .quote-enter.quote-enter-active { opaci ...

csscss-selectors

Press the AngularJS button using just JavaScript and the element

I've been developing a browser extension that automatically clicks buttons on web pages, but I've run into an issue with sites using AngularJS. The code functions properly on most websites except for those built with AngularJS. Below is the snip ...

javascriptjqueryhtmlangularjsclick

Controlling the Quantity of Selected Checkboxes with JavaScript

I am facing an issue with implementing multiple checkboxes with limits in JavaScript, as shown below. $(".checkbox-limit").on('change', function(evt) { var limit = parseInt($(this).parent().data("limit")); if($(this).siblings(':checked&ap ...

javascripthtmlcheckboxlimit

The edges of the cube are not joined together

Looking for a 3D transform cube that can freely flip left and right, with the button fitting into it perfectly. I've found the CSS code to achieve this, but when I set the width of the ".cube" below 200px, the borders of the cube don't connect. I ...

htmlcss

Rotation of the SVG coordinate system distorts angles

My comprehension of SVG, particularly the viewport, viewBox, and the user coordinate system, seemed fairly solid. In the initial example provided below, we utilized a viewBox with a matching aspect ratio as the viewport. As expected, there was no distorti ...

htmlcsssvg

Having trouble with media queries on my iPad

I currently have a media query set up as follows: @media only screen and (max-width: 959px) It works when I resize my browser, however, it does not seem to be functioning correctly when my iPad is in portrait mode. When I include and (max-device-width: 9 ...

htmlcssmedia-queries

The CSS_MODULES encountered a module build error when utilizing the extract-text-webpack-plugin

While processing CSS with CSS modules in a production environment, I encounter an error, but everything works fine in the development environment. Here is the configuration for webpack.base.js: const path = require("path") const webpack = require("webpac ...

javascriptcssreactjswebpackcss-modules

Discord between Bootstrap tabs and C3 charts: A Compatibility Str

On my website, I have implemented Bootstrap navigation tabs that each contain a chart. The issue I am facing is that when I navigate to the home page, the chart in the active tab displays perfectly fine. However, for the other tabs, the charts overlap with ...

javascriptjqueryhtmlcssc3.js

Update the content of an HTML element without having direct access to the HTML code

I am currently in the process of creating a website using a website builder, and I am interested in customizing the default message that is displayed when a required field in the website form is left empty. The form in question is an integral part of the w ...

javascripthtmlcss

Tips for incorporating HTML code within a select option value?

I am working with AngularJS to create a Visual Composer for a website. One feature I want to incorporate is the ability to add HTML code based on the selection made in a dropdown menu. However, I am struggling to figure out how to include the HTML within t ...

javascriptjqueryhtmlangularjs

Can you explain the distinction between ' &:hover' and ' & :hover' pseudoclass selectors?

While styling a Material-UI Button, I encountered an unexpected behavior when adding hover effects. When using & :hover, only the inner span of the button was affected. However, when using &:hover, the desired style was achieved. What is the diff ...

csssassmaterial-ui

How to replicate a WordPress menu bar

Embarking on my coding journey, I've completed courses in HTML, PHP, CSS, JavaScript, and MySQL. Now, I've decided to dive into hands-on learning by creating a Wordpress child theme. My current challenge is figuring out how to overlay two differ ...

phphtmlcsswordpress

Hey there, I was wondering if it's possible to modify the color of the navbar when scrolling on a specific page

After the first 3 pages with a black background and a transparent navbar with white navigation items, I encounter visibility issues when scrolling to the colorful 4th page. Is there a way to change the navbar color on this specific page using ONLY HTML a ...

htmlcsscolorsresponsive-designnavbar