CSS로 문자열 자르기 - 한 줄 /여러 줄
@욕심쟁이
·2019. 12. 11. 11:58
반응형
#한줄 일때
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p{
width: 500px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<p>
CSS is a language that describes the style of an HTML document CSS is a language that describes the style of an HTML document
</p>
</body>
</html>
#여러줄 일때
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p{
height: 65px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3; //3줄 표시
-webkit-box-orient: vertical;
white-space: normal;
word-wrap: break-word;
//말줄임표는 마이크로소프트 엣지, 크롬 등 일부 웹브라우저만 지원합니다.
}
</style>
</head>
<body>
<p>
CSS is a language that describes the style of an HTML document.
CSS describes how HTML elements should be displayed.
This tutorial will teach you CSS from basic to advanced.
CSS is a language that describes the style of an HTML document.
CSS describes how HTML elements should be displayed.
This tutorial will teach you CSS from basic to advanced.
</p>
</body>
</html>
반응형
'IT > CSS' 카테고리의 다른 글
| css 원하는 부분 선택자 (0) | 2019.12.11 |
|---|---|
| 공통css모음 (0) | 2019.12.11 |
| textarea 크기조절 css (0) | 2019.12.11 |
| reset.css (0) | 2019.12.11 |
| a태그 :hover 시 움직임 (0) | 2019.12.11 |
