코드랩 레퍼런스
CSS 말줄임효과, 한줄 효과, 두줄 효과 본문
css를 통해서 글씨를 줄이거나 안보이게 하는 효과입니다.
Sample1 한 줄 일경우 원하는 크기만큼 줄임효과를 보여줍니다.
한 줄 효과
- 문서에 대한 대체 링크를 설정합니다.
- 문서에 대한 저자 링크를 설정합니다.
- 문서에 대한 북마크 URL을 설정합니다.
- 문서에 대한 도움과 관련된 링크를 설정합니다.
- 문서에 대한 저작권과 관련된 링크를 설정합니다.
- 문서에 대한 다음 문서 링크를 제공합니다.
- 문서에 대한 링크를 사용하지 않을 때 설정합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Sample</title>
<style>
.ellipsis{
width:100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<ul>
<li class="ellipsis">문서에 대한 대체 링크를 설정합니다.</li>
<li class="ellipsis">문서에 대한 저자 링크를 설정합니다.</li>
<li class="ellipsis">문서에 대한 북마크 URL을 설정합니다.</li>
<li class="ellipsis">문서에 대한 도움과 관련된 링크를 설정합니다.</li>
<li class="ellipsis">문서에 대한 저작권과 관련된 링크를 설정합니다.</li>
<li class="ellipsis">문서에 대한 다음 문서 링크를 제공합니다.</li>
</ul>
</body>
</html>
Sample2 두 줄 이상 일 경우 원하는 크기만큼 줄임효과를 보여줍니다.
두 줄 효과, 세줄 효과
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Sample</title>
<style>
.ellipsis2{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.ellipsis3{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<ul>
<li class="ellipsis2">컴퓨터 소스 코드를 사용한다면 code 태그를 사용합니다. 수학적인 변수나 프로그램의 변수를 나타낼 대는 var 태그를 사용합니다. 컴퓨터 프로그램으로 출력된 결과물은 samp 태그를 사용합니다. 사용자가 컴퓨터에 입력하는 문자는 kbd 태그를 사용합니다. 글씨를 크게 표현하고 싶다면 big태그를 사용합니다.</li>
<li class="ellipsis3">글씨를 타자모양의 텍스트(Teletype Text Element)를 사용하고 싶다면 tt를 사용합니다. 글씨를 굵게 표현하고 싶다면 b태그를 사용합니다. 글씨를 이탤릭체로 표현하고 싶다면 i태그를 사용합니다. 글씨를 위첨자로 표현하고 싶다면 sup태그를 사용합니다. 글씨를 아래첨자로 표현하고 싶다면 sub 태그를 사용합니다. 글씨에 밑줄을 표시하고 싶다면 u 태그를 사용합니다. 글씨에 취소선을 표시하고 싶다면 s태그를 사용합니다. 글씨에 가운데 줄을 표시하고 싶다면 strike 태그를 사용합니다. 글씨를 작게 표현하고 싶다면 small 태그를 사용합니다.</li>
</ul>
</body>
</html>
이 기능은 웹킷 브라우저에서는 잘 작동하지만 그렇지 않은 브라우저에서는 깨질 수 있기 때문에
line-height: 1.2em;
height: 3.6em;
를 넣어줘야 줄임 효과처럼 보이게 할 수 있습니다.
line-height: 1.2em;
height: 3.6em;
를 넣어줘야 줄임 효과처럼 보이게 할 수 있습니다.
Share
Ad
Comments