Creating a hanging indent for bullets in CSS by using em units

I am trying to create hanging indents for 'bullets' by indenting wrapped lines after the initial prefix (e.g. "1. " or "1a). "

Take a look at this example of HTML:

<html><body>
<div style="text-indent: -3em; padding-left: 3em;">1. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </div>
</body></html>

Why isn't the wrapped line indenting under the first "bla"? How can I achieve this effect?

I am seeking a universal formula that will allow me to determine the necessary CSS and values for text-indent and padding-left based on the prefix size, such as 3 for "1. " or 5 for "1a)."

It is essential for the solution to maintain consistency across various font sizes within the document. Additionally, I am not interested in an ordered list solution.

Answer №1

Check out this demo showcasing an ordered list with CSS counters.

ol {
  counter-reset: section;                
  list-style-type: none;
  text-indent: -1em;
}

li::before {
  counter-increment: section;
  content: counters(section,".")" ";
  display: inline-block;
  width: 1em;
}

.sub-level {
  counter-reset: inner; 
}

.sub-level li::before {
  counter-increment: inner;
  content: counter(section)"."counter(inner, lower-alpha);
}
<ol class="top-level">
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
  <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</li>
  <li> quis nostrud
    <ol class="sub-level">
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
      <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</li>
    </ol>
  </li>
</ol>

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

flexible navigation bar with Bootstrap

I'm currently using Yamm with Bootstrap, but I'm encountering an issue where I need to make it flexible so that each list item will have the same spacing as the others. Additionally, I want to be able to add new list items in the future without d ...

Issue with background image not resizing or repeating correctly on mobile devices

My website header is not scaling properly on mobile devices, causing some issues. The background color with white text using Bootstrap and custom CSS is not extending across the screen on smartphones or when viewed in Chrome Dev Tools. As a result, two ma ...

What exactly is Bootstrap - a CSS framework, a JavaScript framework, or a combination

Being new to Bootstrap, I have taken the time to explore What is Bootstrap? as well as http://getbootstrap.com/. From what I understand so far, Bootstrap is a CSS framework that aids in creating responsive designs that can adapt to various devices. Essent ...

confirming input

Within the script tag, I need to add code to handle the case of a negative number being entered. I've already implemented code to ensure that the value is a number. <script type="text/javascript> function test_ifInteger(testControl, fieldName) ...

Issues with displaying PNG background images in older versions of IE while using HTML5?

Below is the HTML code that I am working with: <section class="first-content-top"> <img src="images/img-diner.png" /> <h1>Menu</h1> </section> <section class="first-content-middle"> <article class="m ...

In Visual Studio Code, beautification feature splits HTML attributes onto separate lines, improving readability and code organization. Unfortunately, the print width setting does not apply

I have done extensive research and tried numerous solutions, When using Angular and formatting HTML with Prettier, it appears quite messy as it wraps each attribute to a new line, for example: <button pButton class="btn" ...

Struggling to display bootstrap glyph icons on any browser

I am currently following a tutorial on .Net Core from Pluralsight that heavily relies on Bootstrap glyph icons. However, I'm facing an issue where none of the glyph icons are showing up in any browser on my Windows 10 system (I've tried both the ...

Changing the background color of the dropdown button in Vue Bootstrap: A step-by-step guide

I've been struggling to modify the background color of a dropdown button, but no method seems to work. I've attempted changing it by using ID, removing its class and applying a new one, and even using !important to override the styles, but the ba ...

Automatically redirect to the linked page once the video concludes

Would it be feasible for a html5 video to trigger the opening of a new page upon completion? What would be the approach to achieve this using javascript? ...

Initiating a Page with Dynamic Modal Window according to Backend Exigencies

Dear experts, can you help me with a problem? I want to implement a modal window on an vb.aspx page if a specific condition from the codebehind query is true. How can I achieve this? Thank you! ...

Scalable Vector Graphics Form Field

I'm looking to enable user input in one of my SVG text fields when they click on it. Any ideas on how to achieve this? const wrapper = document.getElementById('wrapper'); const text = document.getEl ...

Leveraging the JSON property within AngularJS to separate the "Images" attribute by utilizing the split() function

var app= angular.module("myApp",[]) app.controller("ajaxCtrl", function($scope,$http) { $scope.customer=[]; $http.get("sampledata.json").then(function(response) { $scope.customer=response.data; }); }); /sample.json/ { ...

When using CKEditor, pressing the Enter key results in the insertion of <br /> tags

Whenever I use ckeditor, I find that pressing enter results in two <br /> tags being inserted. While I want to keep the line break tags, having them appear twice is not ideal. In my config.js file, I have set the configuration for the enter key as f ...

Troubleshooting Bootstrap select box design discrepancies

Currently revamping a website and encountered an unusual issue with select boxes. There seems to be an overlapping white space where the option values should be. Here's a visual reference: View Image of Select Box Issue Utilizing Bootstrap for the re ...

Customize div styles according to the website domain

I want to dynamically change the header of my website based on whether it is in dev QA or production environment. Below is the HTML code: <div id="wrapper"> <form id="form1" runat="server"> <div class="wrapper"> <div> ...

Ensure Navbar elements remain on a single line

I need my Bootstrap Navbar elements to remain on a single line regardless of the screen width. Although I have searched for a solution to this issue numerous times and tried different approaches, none have proven effective in my case. Below is the code s ...

Issue with footer display while utilizing Bootstrap's cover template

When I utilize the Bootstrap cover template, I encounter an issue where if I resize the window to a smaller level or include enough text to require scrolling, the footer background color turns into a solid color. This is also visible in the template I am u ...

Attempted to remove Child Div using Jquery, but it did not get removed as expected

Trying to remove child divs inside a parent div? There are several methods, such as: $(".ChildDiv").html(""); $('.ChildDiv > div').remove(); $(".ChildDiv").html(""); $("#ParentDiv").html(""); $(".ChildDiv div").remove(); $(".ChildDiv di ...

How come Font Awesome icons aren't appearing in my link?

Is my question strange? I've noticed a peculiar behavior when using fontawesome. Normally, it displays correctly, and I have already referred to the documentation, but none of the solutions I found here seem to solve my issue. Sources I have tried: ...

Is there a way to align a div to the center of the BODY element instead of its parent in

I have a sticky navigation bar with the tab "categories" that reveals the dropdown menu "categoriesDropdown" when hovered over. I want the dropdown menu to span the width of the screen and be centered on it. I also need the dropdown menu to stick to ...