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

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 요소에도 적용 가능하여, 웹 페이지의 다양한 부분에서 유연하게 사용할 수 있습니다.