What is the best way to apply a full-width border-bottom to all line breaks in CSS?

I've got a small CSS code snippet for creating a border-bottom effect. It works well for single line text and also for the last line of text in case of multiple lines breaks.

Here is the CSS:

.underline{
    border-bottom: 1px dotted #000;
    width: 100%;
    display: block; //using block instead of inline due to fullwidth issue.
}

And here is how you can use it in HTML:

  <div class="underline">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry ....
  </div>

https://i.sstatic.net/a24KD.png

If you have any advice or suggestions on this approach, I'd greatly appreciate it. Thank you!

htmlcss

Answer №1

Enclose your text in a span element.

.highlight{
    width: 100%;
    display: block;
}

.highlight span {
    border-bottom: 1px solid #333;
}
  <div class="highlight">
    <span>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </span>
  </div>

Answer №2

.underline {
  width: auto;
  display: block;
  text-decoration: underline dotted;
}
<div class="underline">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>

You can apply the text-decoration style to achieve underlined dotted effect.

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

Is it possible to use a variable to dynamically set the attribute value of an HTML Object element in Angular 8?

Browser: Chrome In my HTML and Typescript files, the code looks like this: source.html <object class = "page" data = "www.google.com" ></object> source.ts import { Component, OnInit } from '@angular/core'; @Component({ selecto ...

htmlangularangular-material

What is the best way to emphasize the chosen node in a treeview using jQuery?

.treeview ul { background-color: white; margin-top: 4px; } .treeview a:visited { background-color: Yellow; } .treeview a:active { background-color: Yellow; } .treeview a:selected { background-color: Yellow; } When I click on a node ...

jqueryasp.netcsstreeview

What is the best way to display overflow on my website without using the overflow attribute?

When I am setting up an online chat function, here is a brief overview of the client-side code I use: .msgln { margin: 0 0 2px 0; padding: 0.5%; border: 3px solid #eee; } #chatbox { text-align: left; margin: 0 auto; margin-botto ...

htmlcss

Creating and sending HTML emails using the Send an Email feature from a Shared Mailbox on Logic Apps

I am new to Azure, Logic Apps, and Stack Overflow. I am attempting to send a customized email using Logic Apps on Microsoft Azure. I have been following a guide to set my template onto a Logic App flow, but I am encountering difficulties with setting the ...

htmlazure-logic-apps

Ensure that the text remains in the forefront while applying a scaling effect to the image

My image gallery features a hover effect that utilizes a CSS transform when the user hovers over the images. transform: scale(1.1); Before the hover effect, the image appears like this: https://i.sstatic.net/fiP5e.jpg And with the effect applied, it loo ...

htmlcssimage

Leveraging Font Awesome with Google's Autocomplete in Pac-Input

I'm experimenting with using the Font Awesome Map Marker in a Google Autocomplete Input. My aim is to position the Map Marker to the left of the placeholder text, apply color only to the map marker, and ensure that it remains visible even while the us ...

cssgoogle-maps

Center-align the items in an owl carousel

My website uses owl carousel to display images fetched through PHP. The challenge is that the number of items is unpredictable, and sometimes there are fewer images than the default 10. As a result, the images align to the left instead of being centered. H ...

jqueryhtmlcssowl-carousel

Find the dominant color within the project's style sheets

Is there a method to extract the main color from an angular material theme and apply it in the css files of an angular project? Within a project, we can specify the primary color in a *.scss document as shown below: @import '~@angular/material/themi ...

cssangularsassthemesangular-material

Tips for tracking the number of selected checkboxes in Angular?

Utilizing $watch, I attempted to showcase the counter value. However, the counter value has not increased yet, To keep count, $scope.$watch('items', function(items){ var selectedItems = 0; angular.forEach(items, function(item){ selectedItems + ...

javascripthtmlangularjs

Displaying the error message "No results found" in PHP AJAX live search with multiple values is not possible

I recently went through a tutorial on Most of it worked smoothly after setting it up on my local machine. However, I encountered an issue when searching for data not present in my database. I expected to receive an error message stating "No result found o ...

javascriptphphtmlmysqlajax

When linking to a section, the Bootstrap navbar obscures the top part of

I have been working on my inaugural website for educational purposes and encountered the following issue: Every time I try to link to a specific section on the same page, it opens as intended but the top portion is obscured by the navbar. <body data-s ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Firefox failing to restart animated gifs (including demos)

Issue Description: In my experience, animated gifs do not restart properly in Firefox compared to other browsers. This problem seems to be unique to Mozilla. For instance, why does this always restart the gif, while this does not? In the latter example, ...

javascriptjqueryhtmlfirefoxcaching

Efficiently Fill JQUERY Mobile Multi-Pages with Dynamic Content

A Question for JQUERY Mobile Beginners: In my basic JQUERY Mobile application, I have a simple setup with two pages. When the user navigates to PAGE2, I need to make an AJAX call to retrieve a JSON object that contains a list of people along with their DB ...

javascriptjqueryhtmlajaxjquery-mobile

How can one transform personalized HTML into a PDF document?

I attempted to send a customized HTML (+CSS) as a PDF, but the resulting PDF sent is only in black and white. I would appreciate any assistance with this issue. Thank you :) Below is the function that I used: function sendEmails() { var data = getBo ...

htmlcssemailgoogle-apps-scriptgoogle-sheets

Having trouble resolving a setInterval problem with JavaScript?

Yesterday, I learned about the setInterval function which allows me to execute a task or function after a specific amount of time. While I have successfully implemented the interval in my code, it keeps adding new lines with the date each time. What I re ...

javascripthtmlfunctiondatesetinterval

Incorporating external content into your website: A guide

Currently, I am in the process of developing a website for personal use (without any intention of making profit). The vision for this website is to serve as a comprehensive "directory" featuring various posts sourced from different websites - similar to a ...

htmlwordpressiframeblogs

Different method for adding child elements to the DOM

When creating a DOM element, I am following this process: var imgEle = document.createElement('img');     imgEle.src = imgURL;             x.appendChild(imgEle); Instead of appending the last line which creates multiple img elements ev ...

javascripthtmlcssdomappendchild

Form validation in HTML is not showing up as expected

I'm new to HTML form validation and I'm currently trying to utilize browser defaults for this purpose. The form is designed to use a JQuery script to submit the data. Despite going through similar posts and updating my code, I am still facing iss ...

htmlcssvalidationbootstrap-4

The disparity between dynamically generated HTML and static HTML is evident

Having trouble understanding why the dynamically generated HTML is different from the static HTML. Even though the output looks the same in the developer tools. I'm looking for a way to make the static HTML appear like the dynamically added HTML, wit ...

javascripthtmljquery

What is the best way to transfer array data, containing JSON information, into an Excel spreadsheet?

I have spent a considerable amount of time searching for a solution to this particular problem. Explanation: My goal is to extract data from an array (specifically from a JSON file) and export it into an Excel spreadsheet. What I have tried: function ex ...

javascripthtmlarraysexcel