CSS와 여러 줄의 텍스트를 정렬하고 강조하는 방법은 무엇입니까?

CSS는 멀티 라인 텍스트의 2 엔드 정렬 및 밑줄 효과를 깨닫습니다.

웹 디자인에서는 두 끝을 정렬하고 밑줄을 추가하는 등 여러 줄의 텍스트에서 특수 스타일 처리를 수행해야합니다. 이 기사는 CSS를 사용 하여이 효과를 효율적으로 달성하는 방법을 설명합니다.

요구 사항 분석

목표는 다중선 텍스트가 다음 조건을 충족시킬 수있는 CSS 스타일을 만드는 것입니다.

1. 동적 라인 번호 : 다른 줄 번호의 텍스트 내용에 적응할 수 있습니다.
2. 사용자 정의 밑줄 : 밑줄의 색상과 텍스트에서 수직 거리를 조정할 수 있습니다.
3. 양쪽 끝 정렬 : 텍스트 내용이 정렬되어 양쪽 끝에 표시됩니다.

해결책

우리는 CSS의 text-align: justify; 2 엔드 정렬을 달성하고 실제 사용을 피하기 위해 밑줄 효과를 시뮬레이션하기 위해 background-image 및 선형 구배를 영리하게 사용합니다.<hr> 레이블로 인한 레이아웃 문제.

1. 기본 스타일 : 글꼴 크기, 라인 높이 등을 포함한 기본 텍스트 스타일을 설정하십시오.

    .justified-text {
     글꼴 크기 : 14px;
     라인 높이 : 25px;
     텍스트 정렬 : 정당화; /* 두 개의 끝이 정렬되었습니다*/
     텍스트 정당화 : 인터 워드; /* 단어 간격 처리*/
   }

2. 밑줄 시뮬레이션 : 선형 그라디언트를 배경 이미지로 사용하여 밑줄 효과를 만듭니다. 색상과 위치는 사용자 정의 가능합니다.

    .justified-text {
     / * ... (기본 스타일) ... */
     배경 이미지 : 선형 그레이드 (오른쪽, #000000, #000000); /* 검은 색 밑줄*/
     배경 위치 : 하단;
     배경 크기 : 100% 2px; /* 아래 두께 조정*/
     배경 반복 : 비 반복;
     패딩 바닥 : 5px; /* 밑줄과 텍스트 사이의 거리 조정*/
   }

   #000000 다른 색상으로 변경하고 background-size 조정하여 밑줄 두께를 제어하고 밑줄과 텍스트 사이의 간격을 조정하기 위해 padding-bottom 조정할 수 있습니다.

위의 CSS 코드를 통해 2- 엔드 정렬을 쉽게 달성하고 멀티 라인 텍스트의 밑줄 효과를 달성 할 수 있습니다. .justified-text 클래스를 포맷 해야하는 텍스트를 포함하는 HTML 요소에 적용해야합니다. text-justify: inter-word; 두 끝이 정렬 될 때 단어 간격이 합리적인지 확인하십시오. 이 접근법은 테두리를 직접 사용하는 것보다 스타일을 제어하기가 더 유연하고 쉽습니다.

위 내용은 CSS와 여러 줄의 텍스트를 정렬하고 강조하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!