CSS를 사용하여 양쪽 끝의 텍스트를 정렬하는 코드 예제 설명
- 不言앞으로
- 2018-11-12 15:40:402529검색
이 기사의 내용은 양쪽 끝에서 텍스트 정렬을 달성하기 위한 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!