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

Implementation of Docker private warehouse registry deployment

CSS text alignment implementation code

Implementation of Docker private warehouse registry deployment

How to uninstall MySQL 5.7.19 under Linux

Enabling and configuring MySQL slow query log

Implementation of Docker packaging image and configuration modification

Understanding of web design layout

Vue imitates Ctrip's carousel effect (sliding carousel, highly adaptive below)

Summary of JavaScript's setTimeout() usage

HTML table markup tutorial (10): cell padding attribute CELLPADDING

Bootstrap 3.0 study notes CSS related supplement

Summary of some tips on MySQL index knowledge

Recommend

How to use squid to build a proxy server for http and https

About MySQL 8.0.13 zip package installation method

The meaning and calculation method of QPS and TPS of MySQL database

JS deep and shallow copy details

VPS builds offline download server (post-network disk era)

MySQL 5.7 installation and configuration tutorial under CentOS7 64 bit

js implements single click to modify the table

A detailed introduction to the three installation methods of rpm, yum and source code under Linux

Graphic tutorial on configuring nginx file server in windows 10 system

Discussion on the Issues of Image Button Submission and Form Repeated Submission

HTML scroll bar textarea attribute setting

Automatically clean up the cache of js and css files in HTML pages (automatically add version numbers)

How to implement the King of Glory matching personnel loading page with CSS3

mysql5.7.21.zip installation tutorial

What are the attributes of the JSscript tag