문자열 자르는 방법

웹페이지에 출력하는 문자열의 길이는 서버단에서 조절하는 게 보통입니다. 하지만, 어떤 경우에는 그게 불가능할 수 있습니다. 이미 전송 받은 문자열을 잘라야 하는 상황이 생길 수 있습니다. CSS를 이용하여 문자열의 일부만 보여주는 방법을 소개해드립니다.

1 한 줄인 경우
2 여러 줄인 경우

한 줄인 경우

예제

문자열이 길면 다음처럼 화면 끝에서 줄바꿈되는 것이 기본 모양입니다.

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			p.a {
				font-family: sans-serif;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<p class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet.</p>
	</body>
</html>

줄바꿈 되지 않게 하기

white-space 속성으로 줄바꿈이 되지 않도록 합니다.

white-space: nowrap;

화면 크기를 벗어나므로 가로 스크롤바가 생깁니다.

화면을 벗어난 문자열 보이지 않게 하기

overflow 속성으로 화면을 벗어난 문자열이 보이지 않게 합니다.

overflow: hidden;

말줄임표 넣기

text-overflow 속성으로 말줄임표를 넣습니다.

text-overflow: ellipsis;

전체 코드

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			p.a {
				font-family: sans-serif;
				font-size: 20px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		</style>
	</head>
	<body>
		<p class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet.</p>
	</body>
</html>

여러 줄인 경우

예제

글자 크기 16px, 줄 높이 1.6으로 설정한 긴 문자열입니다. 세 줄만 나오도록 만들어보겠습니다.

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			p.a {
				font-family: sans-serif;
				font-size: 16px;
				line-height: 1.6;
			}
		</style>
	</head>
	<body>
		<p class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</body>
</html>

높이 정하고 숨기기

요소의 최대 높이를 줄 높이의 3배인 4.8em으로 정합니다. 그리고 넘치는 부분은 숨깁니다.

max-height: 4.8em;
overflow: hidden;

말줄임표 추가하기

다음 코드를 추가하여 말 줄임표를 넣습니다. 세 줄을 보이게 할 것이므로 -webkit-line-clamp의 값은 3입니다.

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;

전체 코드

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			p.a {
				font-family: sans-serif;
				font-size: 16px;
				line-height: 1.6;
				max-height: 4.8em;
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
			}
		</style>
	</head>
	<body>
		<p class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</body>
</html>

CSS / Tutorial / 표 꾸미기 / 테두리

테두리는 border 속성으로 만듭니다. table, th, td 요소에 적용할 수 있습니다. tr 요소에는 적용되지 않습니다.

CSS / Tutorial / 문자열 자르는 방법

CSS / Tutorial / 마우스 호버 효과 / 서서히 길어지는 선 만드는 방법

마우스를 올리면 선이 그려지는 효과를 만들어봅니다. 다음과 같이 사각형을 만듭니다. :before를 이용하여 선이 시작하는 위치를 정합니다. position 속성으로 선 위에 선을 그릴 수 있도록 설정합니다.

CSS / Tutorial / 선택자(Selector)

CSS에서 선택자(CSS Selector)는 HTML 문서의 요소를 선택하고 스타일을 적용할 때 사용되는 구문입니다. 선택자는 특정 요소를 대상으로 스타일을 지정할 수 있도록 돕는 중요한 역할을 하며, 다양한 방법으로 요소를 선택할 수 있습니다.

CSS / Tutorial / placeholder의 색, 글자 모양 등 꾸미는 방법

placeholder는 HTML5에서 새로 나온 속성으로 input 요소나 textarea 요소에 안내문을 넣을 수 있습니다. 기본 모양은 회색의 글자로, 배경색이 하얀색 또는 밝은 색이면 보기에 괜찮습니다. 하지만 배경색이 어두운 색이거나 화려한 색이면 회색 글자가 어울리지 않을 수 있습니다. placeholder는 ::placeholder 선택자로 선택하여 꾸밀 수 있습니다.

CSS / Tutorial / 표 꾸미기 / 배경색

배경색은 background-color 속성으로 만듭니다. table, tr, th, td, thead, tbody, tfoot에 적용할 수 있습니다. 다음 표를 기본으로 하고, 배경색을 여러 곳에 추가해보겠습니다.

CSS / Tutorial / !important

CSS에서 !important는 특정 스타일 규칙이 다른 모든 스타일 규칙보다 우선 적용되도록 강제하는 데 사용됩니다. 이 키워드는 일반적인 스타일 우선 순위를 무시하고, 해당 스타일이 다른 어떤 스타일보다도 높은 우선순위를 가지도록 합니다.

CSS / Tutorial / 마우스 호버 효과 / 다른 이미지 보여주는 방법

이미지에 마우스를 올렸을 때 다른 이미지가 나타나는 효과를 CSS로 만들어보겠습니다. 다음과 같이 이미지 두 개를 넣고 div로 감쌉니다.

CSS / Tutorial / 상속(inheritance)

CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있습니다. 상속하는 속성은 자식 요소에 영향을 미칩니다. 상속하지 않는 속성은 자식 요소에 영향을 미치지 않습니다.

CSS / Tutorial / 링크 꾸미는 방법

링크는 a 태그로 만듭니다. 따라서 링크는 a 태그를 선택하여 꾸밉니다. 예를 들어 다음은 링크의 색을 빨간색으로 만듭니다.