집 > 기사 > 웹 프론트엔드 > HTML의 마지막 텍스트 줄이 불완전하게 표시되는 경우를 처리하는 방법

HTML의 마지막 텍스트 줄이 불완전하게 표시되는 경우를 처리하는 방법

php中世界最好的语言원래의: 2017-11-25 11:57:124898검색

저희 웹페이지에서 레이아웃의 텍스트 내용이 DIV를 초과하거나 절반이 불완전하게 표시되는 경우 어떻게 해결하나요? 오늘은 텍스트 마지막 줄이 불완전하게 표시되는 문제를 해결하는 방법을 보여 드리겠습니다.

div CSS 레이아웃의 DIV 상자에 있는 텍스트의 마지막 행 절반이 완전히 표시되지 않는 문제를 해결하는 방법은 무엇입니까? 또는 텍스트 내용의 마지막 행이 DIV 테두리를 초과하고 내용의 마지막 행을 표시하고 숨기는 CSS 레이아웃을 제어하고 선택하는 방법.

텍스트의 마지막 행이 DIV 테두리를 초과합니다.

레이아웃에서는 텍스트의 마지막 행 또는 여러 행이 DIV 테두리를 초과하는 것으로 나타나는 경우가 많습니다.

1. HTML의 전체 소스 코드는 다음과 같습니다.

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>显示不全或超出</title> 
<style> 
.div{ border:1px solid #000; width:200px; height:50px;line-height:20px} 
</style> 
</head> 
<body> 
<div class="div"> 
最后一排文字显示不完<br /> 
最后一排文字显示一半测试<br /> 
DIVCSS实例测试 
</div> 
</body> 
</html>

CSS 레이아웃의 마지막 텍스트 행이 DIV 테두리 너머에 표시됩니다.

텍스트의 마지막 행이 DIV 테두리 너머에 표시됩니다.

이유

The 위의 텍스트 글꼴 내용은 일반적으로 높이 설정 오류입니다. 이 상자의 높이는 50px이고 CSS 줄 높이는 20px입니다. 그러면 텍스트의 세 행이 60px의 높이를 차지하게 됩니다. 높이가 50px로 설정되어 있습니다. 이러한 종류의 콘텐츠 오버플로는 상위 버전의 브라우저에서 발생합니다.

4. 솔루션

마지막 행 표시가 초과되는 문제를 해결하는 방법에는 네 가지가 있습니다.

첫 번째 방법은 높이를 계산하는 것입니다. 위의 내용은 세 행의 내용을 조판해야 하며 줄 높이를 설정해야 합니다. 20px로 설정한 경우 높이는 3배 20 = 60px(최소 60px 이상)로 설정됩니다.

두 번째, DIV 상자에 콘텐츠가 얼마나 있는지 확실하지 않은 경우 가장 간단하고 일반적인 방법은 DIV의 높이 설정을 취소하여 콘텐츠에 따라 DIV가 늘어나도록 하는 것입니다.

셋째, line-height 높이를 수정하세요. CSS 레이아웃의 높이가 고정되어 있고 표시 내용도 고정되어 있고 완전히 표시하려면 CSS line-height 값만 수정할 수 있습니다. , 50을 3으로 나눈 값 = 16.6, line-height가

integer16px로 설정됩니다. 이렇게 하면 콘텐츠가 고정된 높이로 오버플로되는 문제를 해결합니다.

네 번째 방법은 콘텐츠를 줄이는 것입니다. 여기에는 3줄의 콘텐츠가 표시됩니다. 2줄의 콘텐츠만 표시하려면 한 줄만 제거하면 됩니다.

텍스트 마지막 행의 글꼴이 절반만 표시됩니다.

위의 여러 레이아웃 문제 외에도 DIV 너머의 내용이 넘치지 않고 숨겨져서 표시되지 않는 문제를 해결하는 방법은 무엇인가요?

1. HTML+CSS 예제 코드

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>显示不全或超出</title> 
<style> 
.div{border:1px solid #000;width:200px;overflow:hidden;height:50px;line-height:20px} 
</style> 
</head> 
<body> 
<div class="div"> 
最后一排文字显示不完<br /> 
最后一排文字显示一半测试<br /> 
DIVCSS实例测试 
</div> 
</body> 
</html>

CSS 레이아웃 텍스트가 불완전하게 표시되는 이유 분석

위 사례는 첫 번째 오버플로 DIV 박스 코드와 동일하지만 Overflow:hidden 스타일이 추가되었습니다. 이 "overflow:hidden" 스타일에는 숨겨진 DIV 이상의 콘텐츠가 있으므로 텍스트의 마지막 행이 불완전하거나 절반만 표시됩니다.

해결 방법

해결 방법은 이전 CSS 호환성 문제 "텍스트의 마지막 행이 DIV 테두리를 초과했습니다."를 참조하여 해결할 수 있습니다.

4-1: 텍스트 줄 수를 줄입니다(여기서는 한 줄만 줄입니다)

4-2: 높이를 설정하고 높이를 계산합니다.

4-3: 높이를 설정하지 않습니다.

4-4: 고정 시 높이 계산 line-height 값 수정

구체적인 방법은 문제 사례를 참조하여 자세한 해결 방법을 확인하세요.

텍스트 내용이 DIV를 초과하거나 표시의 절반이 불완전한 문제에 대한 해결책입니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!