텍스트가 길면 .. 으로 표현 방법

javascript 텍스트가 길면 .. 으로 표현 방법


function truncateText(text, maxLength) {
    // 문자열이 maxLength보다 길면, 최대 길이까지 자르고 "..."을 추가합니다.
    if (text.length > maxLength) {
        return text.substring(0, maxLength) + "...";
    }
    // 그렇지 않으면 원본 문자열을 그대로 반환합니다.
    return text;
}

// 사용 예
var myText = "여기에 매우 긴 텍스트를 입력하세요";
var truncatedText = truncateText(myText, 10);
console.log(truncatedText); // 출력: 여기에 매우 긴...

function truncateText(text, maxLength) {

// 문자열이 maxLength보다 길면, 최대 길이까지 자르고 "..."을 추가합니다.

if (text.length > maxLength) {

return text.substring(0, maxLength) + "...";

}

// 그렇지 않으면 원본 문자열을 그대로 반환합니다.

return text;

}

// 사용 예

var myText = "여기에 매우 긴 텍스트를 입력하세요";

var truncatedText = truncateText(myText, 10);

console.log(truncatedText); // 출력: 여기에 매우 긴...

CSS 텍스트가 길면 .. 으로 표현 방법


<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Text Box with Ellipsis</title>
<style>
    .text-box {
        border: 1px solid #ccc;
        padding: 8px;
        width: 200px; /* 최대 너비 설정 */
        white-space: nowrap; /* 텍스트를 한 줄로 만듦 */
        overflow: hidden; /* 넘치는 내용은 숨김 */
        text-overflow: ellipsis; /* 넘치는 텍스트를 ...으로 표시 */
    }
</style>
</head>
<body>
<div class="text-box" contenteditable="true">
    여기에 매우 긴 텍스트를 입력하세요. 이 텍스트는 지정된 너비를 초과하면 끝이 ...으로 표시됩니다.
</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Text Box with Ellipsis</title>

<style>

.text-box {

border: 1px solid #ccc;

padding: 8px;

width: 200px; /* 최대 너비 설정 */

white-space: nowrap; /* 텍스트를 한 줄로 만듦 */

overflow: hidden; /* 넘치는 내용은 숨김 */

text-overflow: ellipsis; /* 넘치는 텍스트를 ...으로 표시 */

}

</style>

</head>

<body>

여기에 매우 긴 텍스트를 입력하세요. 이 텍스트는 지정된 너비를 초과하면 끝이 ...으로 표시됩니다.

</div>

</body>

</html>

div에 contenteditable=”true” 속성을 추가하여 사용자가 텍스트를 직접 편집할 수 있도록 만들었습니다.
이 div는 일반 텍스트 입력처럼 작동하지만, CSS를 통해 너비가 정해져 있고, 넘치는 텍스트는 “…”로 처리됩니다.
이 방식은 텍스트 입력 필드가 아닌 일반 div 요소에도 적용 가능하여, 웹 페이지의 다양한 부분에서 유연하게 사용할 수 있습니다.

overflow:hidden

HTML 및 CSS에서 사용되어 요소의 내용이 요소의 크기를 초과하는 경우 해당 초과 부분을 숨기도록 설정하는 스타일 속성입니다. 즉, 요소의 영역을 벗어나는 내용은 화면에 표시되지 않고 잘리게 됩니다.

주 사용처: 요소가 화면에 미적으로 잘 정렬되도록 하고, 불필요하게 넘치는 텍스트나 이미지가 깔끔하게 숨겨지도록 할 때 사용됩니다.
예시


<div style="width:200px; height:100px; overflow:hidden;">
    이 텍스트는 200x100 박스 안에서 넘치는 부분이 숨겨집니다.
</div>

이 텍스트는 200x100 박스 안에서 넘치는 부분이 숨겨집니다.

</div>

overflow:ellipsis

text-overflow: ellipsis는 CSS에서 텍스트가 요소의 크기를 초과할 때 초과된 부분을 생략 부호(…)로 표시하도록 설정하는 속성입니다. 이는 텍스트가 잘리지 않고 깔끔하게 보이도록 하는 데 유용합니다.

text-overflow: ellipsis는 반드시 white-space: nowrap; 및 overflow: hidden;과 함께 사용해야 제대로 동작합니다.


div {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div {

width: 200px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

위 코드를 적용하면, div 안에 텍스트가 200px을 초과할 경우 끝 부분이 …로 대체되어 나타납니다.

주요 속성 설명
white-space: nowrap;: 텍스트를 한 줄로 유지합니다.
overflow: hidden;: 요소의 크기를 초과한 부분을 숨깁니다.
text-overflow: ellipsis;: 초과된 부분에 생략 부호를 추가합니다.
이를 통해 제한된 공간에서 긴 텍스트를 깔끔하게 표시할 수 있습니다.