728x90
글의 결과
CSS를 사용해서 영역을 벗어날 정도로 긴 텍스트를 생략 처리를 해봅니다.
CSS 설정 옵션
width: 100px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
padding-bottom: 0.14em; //👈 글자 밑이 hidden으로 인해 잘려보일 수 있어서 추가함.안녕하세요.
이번에 회사 업무를 하면서, 부모영역이나 태그 영역을 벗어날 정도로 긴 글자가 들어갈 경우에 대한 예외처리를 해야 했습니다. 서버로 부터 받아 온 데이터를 수정해서 화면에 보여주는 방법은 좋지 않다고 생각했습니다. CSS로 처리해 봅시다.
일단, CSS 코드로 작성한 결과 화면입니다. 여기서 <div> width를 넘어가면, CSS 처리로 글자를 없애고, '...'을 붙이는 코드를 작성해 보겠습니다.
<!-- ... -->
<body>
<div>
css 글자 생략하기css 글자 생략하기css 글자 생략하기css 글자 생략하기css 글자 생략하기
</div>
</body>
<!-- ... -->div {
width: 200px;
height: 30px;
border: 2px dashed red;
}
결과부터 보면, 다음과 같이 처리가 되었습니다.
제가 CSS에 추가한 코드는 단 3줄입니다.
div {
width: 200px; // 너비가 지정되어 있어야 합니다.
height: 30px;
border: 2px dashed red;
text-overflow: ellipsis; // 글자 넓이가 width속성으로 준 너비만큼 길어지면, ...로 처리해 줍니다.
overflow: hidden; // width로 준 너비보다 넓어서는 내용에 대해서 보이지 않게 합니다.
white-space: nowrap; // 공백문자가 있는 경우 줄바꿈하지 않고 한 줄로 나오게 처리할 수 있게 합니다.
}
간혹... 안 되는 경우가 있습니다. display가 inline인 경우입니다.
display를 block 또는 inline-block으로 해야 text-overflow: ellipsis를 사용할 수 있습니다.
추가로 생략이 되었다면, 생략이 된 내용 전문을 이용자가 볼 수 있게 해줘야 UI/UX적으로 사용성이 더 좋다고 생각했습니다. 그래서 마우스를 올려놓으면 tooltip이 발생하게 처리해 주었습니다.
생략되는 텍스트의 html 요소에 title="내용" 코드를 작성해 주면, 툴팁이 만들어 집니다. 함께 사용하는 것이 좋습니다.
<!-- ... -->
<body>
<div title="css 글자 생략하기css 글자 생략하기css 글자 생략하기css 글자 생략하기css 글자 생략하기">
css 글자 생략하기css 글자 생략하기css 글자 생략하기css 글자 생략하기css 글자 생략하기
</div>
</body>
<!-- ... -->
max-width를 지정하기 어려운 경우
다음을 추가한다.
{
width: 95%;
display: block;
}
728x90
'CSS' 카테고리의 다른 글
| [CSS]input, button 포커싱 또는 클릭 시 테두리 지우기 (0) | 2021.02.19 |
|---|---|
| [CSS]글자 밑줄 긑기 및 포인터 클릭 아이콘으로 변경 (0) | 2021.02.18 |
| [CSS]dim 검정 투명 화면으로 처리하기 (0) | 2021.02.18 |
| [HTML] 숫자만 입력받기 및 숫자 최대값 최소값 입력 제한하기 (0) | 2021.02.09 |
| css 폰트 단위 (0) | 2021.01.26 |
댓글