Design the paragraph to resemble text from Microsoft Word

I need to style a paragraph to resemble the formatting in MS Word (see link below for image reference).

This is what I have accomplished so far:

ol {
  text-align: justify;
}

ol.first {
  list-style: upper-roman;
  list-style-position: inside;
}

ol.second {
  list-style: upper-latin;
  list-style-position: inside;
}

ol.third {
  list-style: lower-roman;
  list-style-position: inside;
}

ol li {
  display: inline-flex;
  margin-bottom: 5px;
  white-space: normal;
}

ol li .number {
  display: list-item;
}

ol li .content {
  margin-left: 15px;
}
<ol class="first">
  <li>
    <div class="number"></div>
    <div class="content">Sample text here.</div>
  </li>
  <li>
    <div class="number"></div>
    <div class="content">Additional sample text goes here.</div>
  </li>
  <li>
    <ol class="second">
      <li>
        <div class="number"></div>
        <div class="content">More lorem ipsum content.</div>
      </li>
      <li>
        <div class="number"></div>
        <div class="content">Even more placeholder text.</div>
      </li>
    </ol>
  </li>
</ol>

Link to code on CodePen

When increasing Roman numerals, the paragraphs are no longer aligned vertically. I'm exploring ways to achieve this using lists instead of tables.

htmlcss

Answer №1

Visit this link for a working example

To achieve a custom counter style, you can utilize CSS counter() function within the :before pseudo-element that is absolutely positioned inside a relative parent li.

<ol>
    <li>...</li>
    ...
</ol>

ol {
  list-style: none;
  counter-reset: mycounter;
}

ol li {
  position: relative;
  padding:10px 0 10px 80px;
}

ol li:before {
  content: counter(mycounter, upper-roman);
  counter-increment: mycounter;
  position:absolute;
  top: 0;
  left: 0;
}

Answer №2

Apply a fixed width to your .number element. Check out the demo below:

ol {
  text-align: justify;
}

ol.first {
  list-style: upper-roman;
  list-style-position: inside;
}

ol.second {
  list-style: upper-latin;
  list-style-position: inside;
}

ol.third {
  list-style: lower-roman;
  list-style-position: inside;
}

ol li {
  display: inline-flex;
  margin-bottom: 5px;
  white-space: normal;
}

ol li .number {
  width: 50px; /* new */
  display: list-item;
}

ol li .content {
  margin-left: 15px;
}
<ol class="first">
  <li>
    <div class="number"></div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ipsum nisi, hendrerit vel tristique vel, ornare eget ligula. Quisque ipsum eros, rhoncus nec luctus et, interdum quis est. Quisque semper id magna sed iaculis. Vestibulum ornare aliquam
      neque nec consectetur. Curabitur molestie venenatis urna sed congue. Interdum et malesuada fames ac ante ipsum primis in faucibus.</div>
  </li>
  <li>
    <div class="number"></div>
    <div class="content">Phasellus vel convallis magna. Nam ex quam, lacinia ac facilisis et, tempor vitae elit. Duis sit amet urna scelerisque, molestie ipsum sed, ultricies orci. Duis ac purus congue, maximus enim ut, rutrum quam. Quisque porta bibendum ex, eget laoreet
      neque eleifend eu. Etiam ac leo a dui consectetur dictum ut in lacus.</div>
  </li>
  <li>
    <ol class="second">
      <li>
        <div class="number"></div>
        <div class="content">Labore exercitation fugiat mollit nostrud. Dolore quis id aliquip eu reprehenderit proident. Cupidatat ullamco esse non nisi minim et veniam sunt labore proident esse ea ex. Officia sint deserunt cupidatat amet irure esse fugiat laborum. Aliqua
          deserunt aute cillum enim officia irure ut officia proident ea. Quis sunt enim esse reprehenderit aute est.</div>
      </li>
      <li>
        <div class="number"></div>
        <div class="content">Labore exercitation fugiat mollit nostrud. Dolore quis id aliquip eu reprehenderit proident. Cupidatat ullamco esse non nisi minim et veniam sunt labore proident esse ea ex. Officia sint deserunt cupidatat amet irure esse fugiat laborum. Aliqua
          deserunt aute cillum enim officia irure ut officia proident ea. Quis sunt enim esse reprehenderit aute est.</div>
      </li>
      <li>
        <div class="number"></div>
        <div class="content">Labore exercitation fugiat mollit nostrud. Dolore quis id aliquip eu reprehenderit proident. Cupidatat ullamco esse non nisi minim et veniam sunt labore proident esse ea ex. Officia sint deserunt cupidatat amet irure esse fugiat laborum. Aliqua
          deserunt aute cillum enim officia irure ut officia proident ea. Quis sunt enim esse reprehenderit aute est.</div>
      </li>
    </ol>
  </li>
  <li>
    <div class="number"></div>
    <div class="content">Phasellus vel convallis magna. Nam ex quam, lacinia ac facilisis et, tempor vitae elit. Duis sit amet urna scelerisque, molestie ipsum sed, ultricies orci. Duis ac purus congue, maximus enim ut, rutrum quam. Quisque porta bibendum ex, eget laoreet
      neque eleifend eu. Etiam ac leo a dui consectetur dictum ut in lacus.</div>
  </li>
  <li>
    <div class="number"></div>
    <div class="content">Phasellus vel convallis magna. Nam ex quam, lacinia ac facilisis et, tempor vitae elit. Duis sit amet urna scelerisque, molestie ipsum sed, ultricies orci. Duis ac purus congue, maximus enim ut, rutrum quam. Quisque porta bibendum ex, eget laoreet
      neque eleifend eu. Etiam ac leo a dui consectetur dictum ut in lacus.</div>
  </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

What impact does zoom have on the width of the image?

For more information, you can check out the code here: http://codepen.io/anon/pen/VvdyQb?editors=010 I'm struggling to comprehend how the viewport width changes when zooming in or out. My media queries are activated based on changes in width measured ...

htmlcsswebmedia-querieszooming

What is the best way to create a clickable button link using PHP echo?

Whenever I click the button, it always redirects to just story.php, ignoring all other details. I attempted using JavaScript but I found that utilizing form action is the closest method for me to accomplish this: <form action='./story.php?u=$id&a ...

phphtmlformsecho

What is the best way to create an L shape using CSS?

I am currently working on achieving a unique style using CSS. https://i.sstatic.net/bJlok.png My progress so far: .file { width: 279px; height: 326px; background: linear-gradient(-135deg, transparent 66px, #A1A1A4 40px); position: relative; } ...

htmlcsscss-shapeslinear-gradients

CSS code preventing hyperlink from functioning

My website is almost complete, but I'm running into an issue with some hyperlinks on my event registration page. The first link works fine, but the second one does not. To troubleshoot, I created a test page with just the two links and still encounter ...

htmlasp.netcss

My JavaScript functions are not compliant with the HTML5 required tag

I am currently developing input fields using javascript/jQuery, but I am facing an issue with the required attribute not functioning as expected. The form keeps submitting without displaying any message about the unfilled input field. I also use Bootstrap ...

javascriptjqueryhtml

The background-size CSS property may experience malfunctioning on iOS devices when using Safari browser

My website has a body background size set, which works well on Android and Windows devices. The background size is intended to be 85% width and 5% height of the body. However, when loading the site on an iPhone, the height appears much larger than 5%. It s ...

htmlcssios

Issue with Ionic Grid: Row not occupying entire width of the container

Currently, I am working on creating a straightforward grid consisting of one row and seven columns. Each column holds a div with a single letter of text inside. My intention is for these columns to evenly space out across the page by default, but unfortu ...

htmlcssionic-framework

Dilemma arises from conflicting javascript codes

Currently, I am developing a web application where the main page features a timeline that needs to update its content automatically. To achieve this, I am utilizing the setTimeOut function of JQuery to refresh the timeline every x seconds. In addition, th ...

javascriptjqueryhtmlcssajax

Animate the fire with a click instead of a hover

Is there a way to incorporate a flip animation into a button using a click event instead of hover? Perhaps starting with the + button on the frontside could be a good starting point. Check out this link for reference I have grasped that the animation is ...

javascripthtmlcss

Middle align an absolutely positioned block within a table cell vertically

Here is the code I am working with: td { border: 1px solid #cecece; position: relative; padding: 80px 20px; } .hint { background: yellow; position: absolute; top: 0; bottom: 0; left: 100px; } <table style="width:800px"> <tr> ...

htmlcss

Gleaming Dashboard tabBox with tabPanel Styles

Is there a way to customize the background color and other CSS settings when using tabBox and tabPanel in a Shiny dashboard? I've attempted to use .tab-pane, but it ends up changing the background color of the entire dashboard instead of just the pane ...

htmlcssrshinyshinydashboard

Pass the ID to a PHP script to retrieve the image source tag from the database based on the file

I am facing a challenge that I thought would be simple, but despite my efforts to research and experiment, I can't seem to get it right. I have a database that stores image file names, and I need to retrieve the file name based on the ID specified in ...

phphtml

The mobile device is not displaying the navigation menu (responsive) and columns correctly

@media only screen and (max-width: 960px) { .flexslider { margin-top: 100px; } .main-header { padding: 15px 0; } .main-header .logo { margin-top: 20px; } .service-item, .team-member { margin-bottom: 50px; } .our-skills ...

androidcssmobilenavigationbarresponsive

I'm curious as to why styled components weren't working before

I'm attempting to utilize the before on styled components in React, but it doesn't seem to be functioning correctly. Prior to adding before, the background image was displayed, but after its inclusion, the image is no longer showing up; import st ...

javascripthtmlcssreactjs

Centering dilemma in the div

I have a main container with a width of 940 pixels. Inside the main container, there are two divs with a width of 250px each. My goal is to center align these boxes within the main container. However, the issue arises when the second div is added dynamic ...

jquerycsshtmlcenter

Having trouble printing webpages? Need a useful tutorial on how to print web pages created using jQuery UI, jqGrid, and Zend?

I have been tasked with printing web pages of a website that utilize jqgrid, Jquery calendar, various Jquery UI components, and background images. The server side is built with Zend Framework. Although I lack experience in web page printing, this has beco ...

javascriptjquerycssprintingjqgrid

The attribute aria-required is necessary for a radio group

When creating a required radio group, how should the aria-required="true" attribute be assigned? Specifically, I have multiple <input type="radio"> elements with the same name grouped under a <fieldset>. Should the aria-required be placed o ...

htmlradio-buttonaccessibilitywai-aria

Upon selecting multiple checkboxes, corresponding form fields will be displayed based on shared attributes

When multiple checkboxes are selected by the user, corresponding form fields should appear based on the checkboxes. For example, if both flight and hotel checkboxes are checked, then the full name and last name fields should be displayed while other fields ...

javascripthtmlcss

What is the best way to implement a robust PHP Advanced Search feature using a straightforward HTML form combined with PHP and MySQL?

I'm looking to enhance the search functionality on my website by enabling users to search using multiple criteria. Below is the HTML code for the search form: <form id="form_search" action="search.php" method="post"> <input class="sea ...

phphtmlmysql

The datepicker in Jquery is hidden beneath a div

I've been using this datepicker in my code for a while now. Recently, I made some changes to the HTML and added AJAX calls. However, when I click on the input field, the datepicker doesn't show up. It seems like it's been added to the DOM co ...

jquerycssdatepicker