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

Detailed explanation of vite2.0+vue3 mobile project

CSS text alignment implementation code

Detailed explanation of vite2.0+vue3 mobile project

Using nginx + fastcgi to implement image recognition server

MySQL 8.0.18 Hash Join does not support left/right join left and right join issues

Pure CSS to achieve three-dimensional picture placement effect example code

How to configure virtual user login in vsftpd

Basic operations of mysql learning notes table

Vue3 compilation process-source code analysis

Learn v-model and its modifiers in one article

Write a formal blog using XHTML CSS

TCP performance tuning implementation principle and process analysis

Recommend

Detailed analysis and testing of SSD performance issues in MySQL servers

idea uses docker plug-in to achieve one-click automated deployment

Three implementation methods of Mysql copy table and grant analysis

HTML 5 Reset Stylesheet

Detailed explanation of Javascript string methods

Solution to the problem of repeated triggering of functions in Vue project watch

Vue implements the sample code of adding, deleting, modifying and checking the tree structure

React introduces antd-mobile+postcss to build mobile terminal

Vue implements horizontal beveled bar chart

Detailed explanation of HTML page embedding video and JS control switching video example

CentOS configures local yum source/Alibaba Cloud yum source/163yuan source and configures the priority of yum source

Object.entries usage you don't know in JavaScript

How to use docker to deploy spring boot and connect to skywalking

Web lesson plans, lesson plans for beginners

jQuery uses hide() and toggle() functions to realize the camera brand display hiding function