고대소설에는 주석과 주석이 있는 경우가 많으며, 본문과 주석을 구분하기 위해 주석은 주석과 함께 이중선 형식으로 표기하는 경우가 많다. 우리는 Word 에서 주석 텍스트를 먼저 선택한 다음 "시작" 메뉴의 "단락" 패널에 있는 문자 크기 조절 도구 그룹의 "이중 줄을 하나로" 명령을 사용하면 이중 줄을 쉽게 달성할 수 있다는 것을 알고 있습니다. -라인 클리핑 효과. 아래와 같이:
그렇다면 HTML 파일에서 이러한 효과를 얻는 방법은 무엇입니까?
HTML 에는 flex 라는 디스플레이 레이아웃이 있습니다. flex 레이아웃으로 컨테이너를 정의하는 한 이 컨테이너의 직접 하위 요소는 flex 요소가 되어 위의 이중선 배치 효과를 시뮬레이션합니다. 코드는 다음과 같습니다:
<!DOCTYPE HTML>
<html>
<머리>
<title>유연한 단어</title>
<스타일 유형="텍스트/css">
.컨테이너 {
display: flex; /*플렉스 레이아웃 모드 사용*/
flex-direction: row;/*하위 요소의 배열 방향*/
justify-content: 왼쪽; /*컨테이너 정렬*/
align-items: center;/*텍스트의 수직 정렬을 달성하기 위해 주로 이에 의존하는 하위 요소 정렬*/
flex-wrap: Wrap;/*여러 줄의 Flex 컨테이너 구현*/
}
.콘텐츠{
글꼴 크기:1.4em;
}
.논평{
글꼴 크기:0.5em;
}
기간{
표시:인라인;
}
</style>
</head>
<본문>
<div 클래스="컨테이너">
<span class="content">공주와 공주들을 학교에 데려가는 선택을 준비하기 위해 그들은 재능 있는 사람들과 자선가로 봉사할 수 있습니다. </span>
<span class="comment" style="width:20em;">[가서측] 역대 소설에서는 볼 수 없었던 칭찬과 칭찬의 문단. </span>
<스팬 class="content">둘째, 설반의 아버지가 죽은 후 각 성의 모든 상무국, 총관리인, 사무원 등은 설반이 어리고 세상에 무지한 것을 보고 기회를 이용하여 둘째, Xue Pan의 아버지가 사망한 이후로 각 성의 모든 판매 사업이 중단되었습니다. 국장, 총지배인, 사무원 등은 설판이 어리고 세상에 무지한 것을 보고 그를 납치할 기회를 잡았다. 둘째, 설판의 아버지가 죽은 이후 모든 사업국, 총책임자, 각 지방의 사무원 등이 Xue Pan이 젊고 무지한 것을보고 세상을 알면서 기회를 이용하여 그를 납치했습니다.</span>
<span class="comment" style="width:12em;">【찾아보기】창업자들을 위해 눈물을 흘립니다. </span>
</div>
<div 클래스="컨테이너">
<p class="content">다른 텍스트입니다</p>
<p class="comment" style="width:8em;">두 줄짜리 댓글입니다</p>
<p class="content">다른 문단에 있는 텍스트입니다</p>
<p class="comment" style="width:6em;">두 행을 하나로 결합하는 예</p>
</div>
</body>
</html>위 페이지는 다음과 같이 표시됩니다.
위 그림에서 볼 수 있듯이 flex 레이아웃은 여전히 Word 에 비해 큰 한계를 가지고 있습니다. 첫째, 하위 요소의 크기가 컨테이너의 너비나 높이를 초과하는 경우 flex-wrap: wrap 사용해도 여전히 그렇습니다. 요소가 너무 커지는 것을 막을 수는 없습니다.(하위 요소가 인라인 span 인 경우에도) 두 번째로, 두 줄에 표시되어야 하는 모든 콘텐츠에 대해 적절한 너비가 필요합니다. 그렇지 않으면 이상적인 이중선 일괄 표시 효과가 없습니다.
HTML 에서는 table 요소를 사용하여 이중 행 클리핑 효과를 얻을 수도 있지만 이는 flex 레이아웃 코드보다 더 복잡하고 효과가 반드시 더 이상적인 것은 아닙니다. HTML 에서 이중선 배치 효과를 실현하려면 아직 갈 길이 먼 것 같습니다!
이것으로 HTML에서 Flex 레이아웃을 사용하여 이중 줄 일괄 처리 효과를 얻는 방법에 대한 기사를 마칩니다. HTML 이중 줄 일괄 처리에 대한 자세한 내용을 보려면 downcodes.com에서 이전 기사를 검색하거나 다음 관련 기사를 계속 찾아보세요. 앞으로 downcodes.com을 더 많이 지원해 주세요!