세이박스

text-overflow 이용한 텍스트 길이 제한하기

웹프로그램
게시판 리스트의 경우 제목이 길어지는 경우 특정 길이 이상은 자르고 "..." 붙이는거 많이 보셨을겁니다.
보통 php의 경우 substr() 함수를 이용하거나 left() 함수등 언어에 따라 다양하게 활용하는데
style로 간단하게 적용할 수 있습니다.
text-overflow 옵션을 활용하는 것입니다.

ellipsis
<nobr style="text-overflow:ellipsis;overflow:hidden;width:300px">내용</nobr>

ellipsis-word
<nobr style="text-overflow-mode:ellipsis-word ;overflow:hidden;white-space:nowrap;width:200px;">내용</nobr>

clip
<nobr style="text-overflow:clip;overflow:hidden;width:300px;">내용</nobr>

inherit
<nobr style="text-overflow:inherit;overflow:hidden;width:300px;">내용</nobr>

링크에적용1
<nobr style="text-overflow:ellipsis;overflow:hidden;width=300px;cursor:Hand">내용</nobr>

링크에적용2
<nobr class="nobr" style="width:120px;"><a href="javascript:goView(<%=BBS_SEQ%>);">내용</a></nobr>

테이블에 적용
<table width='200' border='0' cellpadding='0' cellspacing="0" style='table-layout:fixed;' cellspace='0'><tr>
<td><nobr style="text-overflow:ellipsis;width:200px;overflow:hidden;">내용</nobr></td>
</tr></table>

------------------------------------------------------------------------------------
#example1 {text-overflow-mode: clip; width: 200px; overflow:hidden;white-space : nowrap; }
#example2 {text-overflow-mode: ellipsis; width: 200px; overflow:hidden;white-space : nowrap; }
#example3 {text-overflow-mode: ellipsis-word; width: 200px; overflow:hidden;white-space : nowrap; }
------------------------------------------------------------------------------------


white-space :
요소 안에서의 띄어쓰기와 같은 빈 공간을 조절할 때 사용합니다.

white-space에 사용되는 값
normal : 줄 바꿈 디볼트 값을 유지합니다.
pre : 문서 소스에 서식을 할당해서 문서가 표시되게 합니다.
nowrap : 요소 내에서 줄바꿈이 되지 않습니다.

예제)
H1 {white-space: nowrap}
H1에서의 줄바꿈을 하지 않도록 설정합니다.
 

PHP 글자 수 자르기

웹프로그램

function cut_str($msg,$cut_size) {
if($cut_size<=0) return $msg;
if(ereg("\[re\]",$msg)) $cut_size=$cut_size+4;
for($i=0;$i<$cut_size;$i++) if(ord($msg[$i])>127) $han++; else $eng++;
$cut_size=$cut_size+(int)$han*0.6;
$point=1;
for ($i=0;$i<strlen($msg);$i++) {
if ($point>$cut_size) return $pointtmp."..";
if (ord($msg[$i])<=127) {
$pointtmp.= $msg[$i];
if ($point%$cut_size==0) return $pointtmp."..";
} else {
if ($point%$cut_size==0) return $pointtmp."..";
$pointtmp.=$msg[$i].$msg[++$i];
$point++;
}
$point++;
}
return $pointtmp;
}

글자에 배경색 칠하기(형광펜 효과내기~)

웹프로그램
웹 문서를 읽다보면 중요한 부분에 형광펜(이렇게~ㅋㅋ)으로 칠한것 같은 효과를 낸것을 보신적이 있으시죠?
이 효과는 스타일 시트라고 하는 것을 사용하여 만들 수 있는데 스타일 시트 중에서도 InLine Style Sheet라고 하는 방식을 이용하면 간단히 원하는 부분에 적용할 수 있습니다.
그럼 함 같이 만들어 볼까요?
 
style="background-color:Yellow">형광펜 효과내기~
 
간단하게 요렇게만 작성해 주시면 위의 글자에 노란색의 배경색이 칠해지게 되요~
 
자 그럼 간단한 설명좀 들어갈까요?
우선 font 태그는 다들 아시죠?? 글자의 속성중 글자 크기, 글자 색, 글씨체를 지정할 수 있는 태그이지요..
위에서는 그 중 글자 크기(size 속성을 이용해서 크기는 2로 지정)만 지정을 했습니다.
그 font 태그 안에 style속성을 사용하였죠? 바로 이부분이 InLine 스타일시트를 적용한 부분이랍니다.
스타일 시트의 속성은 태그가 가진 속성이랑 대부분 명칭이 다르니 헷갈리시면 안되겠죠?!
스타일시트에서 배경색을 지정하는 속성인 background-color에 색상 값은 노란색을 준 것이죠~
색을 지정하는 방법은 위와 같이 색의 이름을 사용해도 되고 색이 가진 고유의 코드값(예 - #0f0923)을 사용하셔도 됩니다.
 
위의 예를 사용한 간단한 HTML 소스입니다..이런식으로 사용하실 수 있답니다~
 

안녕하세요~

Prayer가 진행하는 HTML Tip~이랍니다.

첫 시간이라 스타일시트를 이용

해서 간단하게 나타낼 수 있는 형광펜 효과내기를 준비했어요~

모쪼록 많은 도움이 되셨음 합니다~

앞으로 더 좋은 팁들 많이 많이 올려드릴께요~