How to make multiple lines of text aligned and underscore with CSS?

CSS realizes the two-end alignment and underscore effects of multi-line text

In web design, it is often necessary to perform special style processing on multiple lines of text, such as aligning the two ends and adding underscores. This article will explain how to use CSS to achieve this effect efficiently.

Requirements Analysis

The goal is to create a CSS style that allows multi-line text to meet the following conditions:

1. Dynamic line number: Can adapt to text content of different line numbers.
2. Custom underscore: You can adjust the color of the underscore and the vertical distance from the text.
3. Align both ends: The text content is aligned and displayed at both ends.

Solution

We use CSS' text-align: justify; to achieve two-end alignment, and cleverly use background-image and linear gradient to simulate the underscore effect to avoid using actual<hr> Layout problems caused by labels.

1. Basic style: Set the basic style of text, including font size, line height, etc.

    .justified-text {
     font-size: 14px;
     line-height: 25px;
     text-align: justify; /* two ends aligned*/
     text-justify: inter-word; /* Handle word spacing*/
   }

2. Simulate underscore: Use linear gradients as background image to create an underscore effect. Colors and locations are customizable.

    .justified-text {
     /* ... (Basic Style) ... */
     background-image: linear-gradient(to right, #000000, #000000); /* black underline*/
     background-position: bottom;
     background-size: 100% 2px; /* Adjust the underline thickness*/
     background-repeat: no-repeat;
     padding-bottom: 5px; /* Adjust the distance between underscore and text*/
   }

   You can change #000000 to another color, adjust background-size to control the underscore thickness, and padding-bottom to adjust the spacing between the underscore and text.

Through the above CSS code, you can easily achieve the two-end alignment and underscore effects of multi-line text. Remember to apply the .justified-text class to HTML elements that contain the text you need to format. text-justify: inter-word; Ensure that word spacing is reasonable when the two ends are aligned. This approach is more flexible and easier to control styles than using borders directly.

The above is the detailed content of How to make multiple lines of text aligned and underscore with CSS?. For more information, please follow other related articles on the PHP Chinese website!