CSS를 사용하여 양쪽 끝의 텍스트를 정렬하는 코드 예제 설명-CSS 튜토리얼-php.cn

CSS를 사용하여 양쪽 끝의 텍스트를 정렬하는 코드 예제 설명

不言

풀어 주다： 2018-11-12 15:40:40

앞으로

2598명이 탐색했습니다.

이 기사의 내용은 양쪽 끝에서 텍스트 정렬을 달성하기 위한 CSS의 코드 예제를 설명하는 것입니다. 이는 특정 참조 값을 가지고 있으므로 도움이 될 수 있습니다.

양식을 만들다 보면 이름, 휴대폰번호, 출생지 등 상위 필드와 하위 필드가 일치하는 상황을 자주 접하게 됩니다. 이러한 방식으로 텍스트 정렬 및 텍스트 정렬 스타일을 사용합니다.

text-align을 직접 설정하면 text-justify의 상황이 복잡해 익숙하지 않은 사람도 있을 수 있습니다. IE의 값은 다음과 같습니다.

auto: 브라우저 사용자 에이전트가 사용할 정렬 규칙을 결정할 수 있도록 합니다.

inter-word: 단어 사이에 공백을 추가하여 텍스트를 정렬합니다. 이 동작은 모든 텍스트 줄을 정렬하는 가장 빠른 방법입니다. 정렬 동작은 단락의 마지막 줄에 영향을 주지 않습니다.

newspaper: 단어나 문자 사이의 간격을 늘리거나 줄여 텍스트를 정렬합니다. 라틴 알파벳의 양쪽 끝을 정렬하는 가장 정확한 형식입니다

distribute: 신문처럼 공백을 처리합니다

distribute-all-lines: distribution과 동일한 방식으로 줄을 정렬하고 정렬된 두 단락도 포함하지 않습니다. 마지막 줄 . 표의 문자 문서의 경우

inter-ideograph: 표의 문자 텍스트에 대한 완전한 정당화를 제공합니다. 표의문자와 단어 사이의 공백을 늘리거나 줄입니다

하지만 text-overflow, Overflow-x 등과 같이 IE의 전용 구현으로 처음 구현되었으며 FF에서는 아주 늦게 구현되었습니다. 엄격한 호환성 문제입니다. 그리고 FF와 Chrome에서는 한자 사이에 공백이나 부드러운 줄 바꿈을 수동으로 삽입해야 Chrome에서 발생하는 저항이 훨씬 더 큽니다. p>

계획:

.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;
      }
  }
  
  运行代码：
  


<!DOCTYPE HTML>
<html>
    <head>
        <title>文本两端对齐 </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">姓 名</div>
            <div class="test1">姓 名 姓 名</div>
            <div class="test1">姓 名 名</div>
            <div class="test1">所 在 地</div>
            <div class="test1">工 作 单 位</div>
        </div>
    </body>
</html>

로그인 후 복사

위 내용은 CSS를 사용하여 양쪽 끝의 텍스트를 정렬하는 코드 예제 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!