[javascript] 단어(구분자) 단위 반응형 줄바꿈
얼마전 개발자 오픈채팅방에서
가변적인 너비의 div안에 DB에서 가져온 텍스트들을 넣는데
div의 너비가 바뀔때마다 자동으로 줄바꿈이 되어야 하는걸 만들어야 하는데
잘 모르겠다 라는 질문이 있었다.
간단하게 css로 줄바꾸면 되는거 아닌가 했는데
콤마(,) 로 구분되어진 단어들이고 단어안에 띄어쓰기도 들어가 있다고 한다.
즉 콤마로 구분되어진 단어들이 너비에 따라 자동으로 줄바꿈이 되어야 하며
단어들은 띄어쓰기가 포함되어 있고 폰트의 크기도 가변적으로 변할 수 있다고 한다.
재밌어 보여서 대충 구현을 해 보았다.
jsbin으로 구현해 보았으니
https://jsbin.com/tomojibaku/1/edit?js,output
JS Bin
Sample of the bin:
jsbin.com
이 링크에 가서 확인을 하면 된다.
코드는
HTML
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="textContatiner" class="txt-container">
</div>
</body>
</html>
|
cs |
JS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
var data = "일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈,육번놈, 칠버어언 놈,일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈, 칠버어언 놈,일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈, 칠버어언 놈,일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈, 칠버어언 놈,일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈, 칠버어언 놈,일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈, 칠버어언 놈,일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈, 칠버어언 놈,일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈, 칠버어언 놈";
setTxt();
// 너비가 바뀔때마다 셋팅을 해준다.
$( window ).resize(function() {
setTxt();
});
function setTxt(){
// 너비가 변할때마다 div컨테이너를 비워주고 다시 셋팅
var container = $("#textContatiner");
container.empty();
var conW = container.width();
var dataArr = data.split(",");
// 폰트크기도 가변적으로 바뀔수 있기 때문에 1글자의 너비를 구한다.
container.append($("<span id='test'>한</span>"));
var oneW = $("#test").width()*2;
$("#test").remove();
var lineData = "";
var subData = "";
var lineNo = 0;
var spId ="sp"+ lineNo;
var sp = $("<span id='"+spId+"'></span>");
container.append(sp);
for (var i = 0; i <dataArr.length; i++) {
subData = lineData;
lineData = lineData+","+dataArr[i];
sp.text(lineData);
var spW = sp.width();
if(spW > conW - oneW){
sp.text(subData);
sp.css("display","block");
lineNo++;
i--;
spId ="sp"+ lineNo;
sp = $("<span id='"+spId+"'></span>");
container.append(sp);
lineData = "";
}
console.log(spW);
};
}
|
cs |
폰트가 바뀔수도 있으니 div안에 한글자를 넣어서 너비를 확인하고 클리어 시킨다음
콤마로 구분된것들을 하나씩 추가 하다가 일정 너비 이상이 되면
이전텍스트로 복원을 하고 새로운 span을 생성해 넣는 식이다.
더 깔끔하게 구현하려면 css도 좀 손봐야 하고
첫번째 문장에 들어가는 콤마 지우고 하면 쓸만할 것 같다.
'Yame Programmer > Java Script[JQuery]' 카테고리의 다른 글
| [JS] IE에서 개체가 'find' 속성이나 메서드를 지원하지 않습니다. (0) | 2021.02.19 |
|---|---|
| javascript 배열안의 객체 이름순 정렬 (0) | 2021.01.08 |
| javascript 배열안의 중복객체 카운트 (0) | 2021.01.08 |
| [제이쿼리] form의 내용을 한번에 오브젝트로 만들기 (0) | 2018.05.09 |
| [자바스크립트] 자바스크립트 다국어 적용 방법 (0) | 2017.08.07 |