문자열을 자를 때, 무심코 음절 갯수로 subString으로 자르게 되면
한글 + 영문 혼용의 상황에서, 굉장히 불편한 상황을 마주할 수 있다.
같은 여섯글자일 때, 한글과 영어가 각각
여섯글자입니다
abcde
로 보이는 현상을 마주할 수 있다.
본인은 정해진 넓이의 칸에 글자가 넘치면 자르는 함수를 만드려고 했는데,
글자가 아니라 byte 단위로 잘라야 편안한 UI를 볼 수 있다.
(초보 개발자지만 이런 디테일에 신경쓰는 저, 비정상인가요?)
자르는 방법은 아래와 같다.
var textEllipsis = function(data, offset){ //data: 자르고자 하는 str, offset: 자르는 byte 길이
dataByteLength = (function(s,b,i,c){ //data의 길이를 byte로 변환한다
for(b=i=0;c=s.charCodeAt(i++);b+=c>>11?3:c>>7?2:1);
return b;
})(data);
if(dataByteLength > offset){
for(b=i=0;c=data.charCodeAt(i);) {
b+=c>>7?2:1;
if(b > offset) break;
i++;
}
return data.substring(0,i)+'…';
}else{
return data;
}
}
[참고 블로그]
'Frontend > JS, CSS, HTML' 카테고리의 다른 글
input password에서 1~2글자가 한글로 바뀌는 이슈: ime & inputMode (1) | 2024.12.17 |
---|---|
반응형 관련 책갈피 (2) | 2022.03.21 |
[색조합] 내맘대로 팔레트 -2 (0) | 2021.10.13 |
[JS + HTML] 동적 datalist option 추가 + data-value 로 보이는 것과 다른 값 보내기 (0) | 2021.08.13 |
[색조합] 내맘대로 팔레트 #1 (0) | 2021.07.30 |