html 텍스트 말줄임

 

 

 

 

=================================

=================================

=================================

 

 

 

 

 

* IT, 소프트웨어, 플랫폼, 디바이스 기기들, 네트워크 등등 필요정보 모음 관련 [Essentials]

- https://202psj.tistory.com/1895 //정보모음

 

* 오피스, 사무용, 업무용 프로그램 소프트 기기 팁 모음 관련

- https://202psj.tistory.com/2060 //정보링크

 

* 무료 소프트웨어 유틸, 영상툴, 3D툴, 그림툴 등등 모음 관련

- https://202psj.tistory.com/2063 //정보링크

 

 

 

=================================

=================================

=================================

 

 

 

 

출처ㅣ http://angeleyes.tistory.com/247

긴 문자열이나, 1byte 문자열이 쭈욱~ 있을 경우.. 레이아웃이 틀어지는 현상이 발생 될 수 있습니다.

 

여기서 할 수 있는 방법이 라인 변경이나, 문자열을 … 처리 하는 방법이 있는데.

오늘은 … 처리하는 방법을 알아보도록 하겠습니다.

 

 

위와 같은 형태로 처리하는 방법에 대해서 알아보도록 하겠습니다.

 

위 방법은 text-overflow라는 css를 이용하게 되는데 ie6, Opera, firefox 등에서는 몇 가지 추가적인 사항이 있습니다.

 

일단 처리된 css를 보십니다.

 

1	.ellipsis{

2	white-space:nowrap;

3	text-overflow:ellipsis;     /* IE, Safari */

4	-o-text-overflow:ellipsis;      /* Opera under 10.7 */

5	overflow:hidden;            /* "overflow" value must be different from "visible" */

6	-moz-binding: url('ellipsis.xml#ellipsis');

7

}

 

text-overflow, overflow ie7, ie8, safari에서는 다음 속성으로 조절이 가능하나 다른 브라우저에서는 아래와 같이 추가되어야 합니다.

ie6 : width (style로 정의 되어야 하며, <div width=”100%” 와 같은 attribute로는 지원되지 않습니다.

opera : -o-text-overflow (오페라 버전이 10.7 이후부터 적용가능)

firefox : -moz-binding: url('ellipsis.xml#ellipsis');
현재 지원 되지 않아 description 속성을 이용하여 처리되어야 합니다.

-- 2011.04.06 추가 내용
firefox 4.* 으로 버전 업되면서 xml을 이용한 처리가 되지 않는다고 합니다.
자세한 내용은 아래 블로그에서 확인하시기 바랍니다.

CSS 말줄임 처리의 브라우저 호환성 문제 

 

firefox를 위한 xml은 아래와 같습니다.

 

1	<?xml version="1.0"?>

2	<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

3	<binding id="ellipsis">

4

<content>

5	<xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>

6	</content>

7	</binding>

8	</bindings>

 

좀 더 자세한 내용은 아래 링크를 참고하시기 바랍니다.

https://developer.mozilla.org/En/CSS/Text-overflow

https://developer.mozilla.org/en/XUL/description

 

이제 본격적으로 적용 방법입니다.

 

일단 div에서는 class에 제가 선언한 ellipsis, width만 추가되면 됩니다.

 

1	<div class="ellipsis" style="width:50%; border:solid 1px black;" title="(변경 전)나는 자랑스러운 태극기 앞에 조국과 민족의 무궁한 영광을 위하여 몸과 마음을 바쳐 충성을 다할 것을 굳게 다짐합니다.">

2	(변경 전)나는 자랑스러운 태극기 앞에 조국과 민족의 무궁한 영광을 위하여 몸과 마음을 바쳐 충성을 다할 것을 굳게 다짐합니다.

3

</div>

 

 

다음은 테이블입니다.

1	<table width="50%" border="1" style="table-layout:fixed;" cellspacing="1" cellpadding="1">

2

<tr>

3

<td>

4	<div class="ellipsis" style="width:100%;">

5	(변 경 후)나는 자랑스러운 태극기 앞에 자유롭고 정의로운 대한민국의 무궁한 발전을 위해 충성을 다할 것을 굳게 다짐합니다.(변경 후)나는 자랑스러운 태극기 앞에 자유롭고 정의로운 대한민국의 무궁한 발전을 위해 충성을 다할 것을 굳게 다짐합니다.</div></td>

6	<td style="width:30px; text-align:center;">1</td>

7	<td style="width:30px; text-align:center;">2</td>

8

</tr>

9

</table>

 

테이블로 처리 되는 경우에는 반듯이 style 속성에

table-layout:fixed

값이 설정되어야 합니다.

그리고 점선 처리되어야 할 컬럼에만 width 속성을 뺀 다른 곳에는 반듯이 width 속성이 들어가야 됩니다.

그래야지 테이블을 유지합니다.

 

테이블의 width를 persent로 설정한 이유는 테이블 사이즈의 변경 모습을 확인하기 위함이며, 말줄임 처리 되는 컬럼에 width 값은 100%를 주어 꽉차게 만든 상태입니다.

 

td에 ellipsis를 바로 적용할 수 없으며, div로 감싸게 되는 이유는 에… 예전에 들었는데..

제가 개발자라.. 잊어버렸습니다. ㅡ.ㅡ;;;;  퍼블리셔분들은 꼭 알고 있어야 할 내용이었는데요 *_*;;;;;

 

아무튼 div로 감싸야 됩니다. ㅡ.ㅡ;;;;

 

이렇게 되면 테이블 사이즈가 변경되어도 함께 말줄임 사이즈도 변경될 수 있습니다.

 

ul, li에 적용 방법은 다음과 같습니다…

뭐.. 위와 동일하다고 생각하시면 되는데 sample이라고 생각하시면 좋을 듯 합니다.

 

 

1

#ul li {

2	white-space:nowrap;

3	text-overflow:ellipsis;     /* IE, Safari */

4	-o-text-overflow: ellipsis; /* Opera under 10.7 */

5	overflow:hidden;            /* "overflow" value must be different from "visible" */

6	-moz-binding: url('ellipsis.xml#ellipsis');

7	width:100%;

8

}

 

 

01	<ul id="ul" style="width:50%; border:solid 1px black; list-style-image:none; list-style-type:none; padding:0; margin:0;">

02

<li>

03	<a style="cursor:hand; cursor:pointer;" onclick="alert('li_1 click');">

04	li_1 (변경 후)나는 자랑스러운 태극기 앞에 자유롭고 정의로운 대한민국의 무궁한 발전을 위해 충성을 다할 것을 굳게 다짐합니다.(변경 후)나는 자랑스러운 태극기 앞에 자유롭고 정의로운 대한민국의 무궁한 발전을 위해 충성을 다할 것을 굳게 다짐합니다.</a></li>

05

<li>

06

li_2

07

<ul>

08	<li>li_child___li_child___li_child___li_child___li_child___li_child___li_child___li_child___li_child___li_child___</li>

09

</ul>

10

</li>

11

</ul>

 

이렇게 하시면 cross browser 말줄임이 구현됩니다.

 

접기

01	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

02	<html xmlns="http://www.w3.org/1999/xhtml">

03

<head>

04	<title> new document </title>

05	<meta name="generator" content="editplus">

06	<meta name="author" content="angeleyes">

07	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

08	<meta name="keywords" content="angeleyes,testhtml,testjavascript">

09	<meta name="description" content="test document">

10	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

11

12	<script language="javascript" type="text/javascript">

13	//<![cdata[

14	$(document).ready(function() {

15

16

});

17

18	function test(){

19

try {

20

21

}

22	catch(e) {

23	alert("test ==> " + e.message);

24

}

25

}

26

//]]>

27

</script>

28	<style type="text/css">

29	.ellipsis{

30	white-space:nowrap;

31	text-overflow:ellipsis;     /* IE, Safari */

32	-o-text-overflow: ellipsis; /* Opera under 10.7 */

33	overflow:hidden;            /* "overflow" value must be different from "visible" */

34	-moz-binding: url('ellipsis.xml#ellipsis');

35

}

36

37

#ul li {

38	white-space:nowrap;

39	text-overflow:ellipsis;     /* IE, Safari */

40	-o-text-overflow: ellipsis; /* Opera under 10.7 */

41	overflow:hidden;            /* "overflow" value must be different from "visible" */

42	-moz-binding: url('ellipsis.xml#ellipsis');

43	width:100%;

44

}

45

</style>

46

</head>

47

48

<body>

49

<br />

50	<h2>div tag</h2>

51	<div class="ellipsis" style="width:50%; border:solid 1px black;" title="(변경 전)나는 자랑스러운 태극기 앞에 조국과 민족의 무궁한 영광을 위하여 몸과 마음을 바쳐 충성을 다할 것을 굳게 다짐합니다.">

52	(변경 전)나는 자랑스러운 태극기 앞에 조국과 민족의 무궁한 영광을 위하여 몸과 마음을 바쳐 충성을 다할 것을 굳게 다짐합니다.</div>

53

<br />

54

<br />

55	<h2>table tag</h2>

56	<table width="50%" border="1" style="table-layout:fixed;" cellspacing="1" cellpadding="1">

57

<tr>

58

<td>

59	<div class="ellipsis" style="width:100%;">

60	(변 경 후)나는 자랑스러운 태극기 앞에 자유롭고 정의로운 대한민국의 무궁한 발전을 위해 충성을 다할 것을 굳게 다짐합니다.(변경 후)나는 자랑스러운 태극기 앞에 자유롭고 정의로운 대한민국의 무궁한 발전을 위해 충성을 다할 것을 굳게 다짐합니다.</div></td>

61	<td style="width:30px; text-align:center;">1</td>

62	<td style="width:30px; text-align:center;">2</td>

63

</tr>

64

</table>

65

<br />

66

<br />

67	<h2>ul, li tag</h2>

68	<ul id="ul" style="width:50%; border:solid 1px black; list-style-image:none; list-style-type:none; padding:0; margin:0;">

69

<li>

70	<a style="cursor:hand; cursor:pointer;" onclick="alert('li_1 click');">

71	li_1 (변경 후)나는 자랑스러운 태극기 앞에 자유롭고 정의로운 대한민국의 무궁한 발전을 위해 충성을 다할 것을 굳게 다짐합니다.(변경 후)나는 자랑스러운 태극기 앞에 자유롭고 정의로운 대한민국의 무궁한 발전을 위해 충성을 다할 것을 굳게 다짐합니다.</a></li>

72

<li>

73

li_2

74

<ul>

75	<li>li_child___li_child___li_child___li_child___li_child___li_child___li_child___li_child___li_child___li_child___</li>

76

</ul>

77

</li>

78

</ul>

79

</body>

80

</html>

접기

 

감사합니다.

 

 

 

=================================

=================================

=================================

 

 

출처 : http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=105&docId=73334716&qb=aHRtbCBkaXYgb3ZlcmZsb3c=&enc=utf8&section=kin&rank=1&search_sort=0&spq=0&pid=gqpcPc5Y7thsssDBtDNssc--477468&sid=TqpHeF1Gqk4AAAljBIE

아래처럼 해보세요. table에 스타일을 넣어야 한다면 td에 넣을때 잘 안될 경우 아래처럼 해보세요.

 

<table>
  <tr>

    <td>

      <div style="width:100px; height:50px; text-overflow:ellipsis; overflow-x:hidden; overflow-y:scroll; table-layout:fixed;">내용</div>

    </td>

  </tr>

</table>

 

 

▼ 참고소스:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>

<body>
<div style="width:100px; height:50px; text-overflow:ellipsis; overflow-x:hidden; overflow-y:scroll; table-layout:fixed;">
블라블라블라블라블라블라1
블라블라블라블라블라블라2
블라블라블라블라블라블라3
블라블라블라블라블라블라4
블라블라블라블라블라블라5
블라블라블라블라블라블라6
블라블라블라블라블라블라7
</div>
</body>
</html>

 

 

 

=================================

=================================

=================================