CSS text alignment implementation code

When making forms, we often encounter the situation of aligning two fields, such as name, mobile phone number, and place of birth. In this way, we need to use text-align and text-justify styles.

Just set text-align to justify. The situation of text-justify is complicated, and some people may not be familiar with it. The values of IE are as follows:

auto : Allows the browser user agent to determine the justification to use
inter-word : Justify text by adding spaces between words. This behavior is the fastest way to align all lines of text. Its justification behavior does not work on the last line of a paragraph.
newspaper : Justify text by increasing or decreasing the space between words or letters. Is the most precise format for justifying the Latin alphabet
distribute : handles spaces like newspaper
distribute-all-lines: Justifies lines in the same way as distribute, but also excludes the last line of two aligned paragraphs. Applicable to ideographic documents
inter-ideograph : Provides full justification for ideographic text. He increases or decreases the space between ideograms and words

But it was originally implemented as a private feature of IE, like text-overflow, overflow-x, etc., and was not implemented until very late in FF. In other words, there are strict compatibility issues. In addition, FF and Chrome require manual insertion of spaces or soft line breaks between Chinese characters for this to take effect, and the resistance encountered in Chrome is even greater. p>

plan:

.test1 {
          text-align:justify;
          text-justify:distribute-all-lines;/*ie6-8*/
          text-align-last:justify;/* ie9*/
          -moz-text-align-last:justify;/*ff*/
          -webkit-text-align-last:justify;/*chrome 20+*/
      }
      @media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
          .test1:after{
              content:".";
              display: inline-block;
              width:100%;
              overflow:hidden;
              height:0;
          }
      }

Run the code:

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Text Alignment</title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <style>
                .box1{
                    background:red;
                    width:30%;
                }
                .test1 {
                    text-align:justify;
                    text-justify:distribute-all-lines;/*ie6-8*/
                    text-align-last:justify;/* ie9*/
                    -moz-text-align-last:justify;/*ff*/
                    -webkit-text-align-last:justify;/*chrome 20+*/
                }
                @media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
                    .test1:after{
                        content:".";
                        display: inline-block;
                        width:100%;
                        overflow:hidden;
                        height:0;
                    }
                }
            </style>
        </head>
        <body>
            <div class="box1">
                <div class="test1">Name</div>
                <div class="test1">Name Name</div>
                <div class="test1">Name</div>
                <div class="test1">Location</div>
                <div class="test1">Workplace</div>
            </div>
        </body>
    </html>

Summarize

The above is the implementation code of CSS text alignment introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!

<<: Disable IE Image Toolbar

>>: How to install OpenSuse on virtualbox

$How to implement real-time polygon refraction with threejs$

CSS text alignment implementation code

How to implement real-time polygon refraction with threejs

More than 100 lines of code to implement react drag hooks

MySql 5.7.21 free installation version configuration method under win10

Win10 configuration tomcat environment variables tutorial diagram

Directory permissions when creating a container with Docker

In-depth understanding of Linux load balancing LVS

Vue implements Dialog encapsulation

How to batch generate MySQL non-duplicate mobile phone number table example code

jQuery implements shopping cart function

JavaScript Advanced Custom Exception

Recommend

Use nginx to dynamically convert image sizes to generate thumbnails

Summary of common Linux distribution mirror source configuration

【Web Design】Share E-WebTemplates exquisite foreign web page templates (FLASH+PSD source file+HTML)

How to connect SpringBoot to MySQL to get data and write to the backend interface

Install Apache2.4+PHP7.0+MySQL5.7.16 on macOS Sierra

Detailed explanation of mysql transaction management operations

SVG button example code based on CSS animation

HTML background image and background color_PowerNode Java Academy

Summary of 7 types of logs in MySQL

Docker builds the code detection platform SonarQube and detects the process of Maven projects

HTML&CSS&JS compatibility tree (IE, Firefox, Chrome)

JavaScript to achieve click image flip effect

Comparative Analysis of UI Applications of Image Social Networking Sites (Figure)

How to use @media in mobile adaptive styles

Introduction and architecture of Apache Arrow, a high-performance data format library package on JVM (Gkatziouras)