ellipsis 로 문자열 자르기

제목의 문자열이 긴 경우 이제 더이상 substring으로 자르지 맙시다.
다음 css 를 사용하면 브라우저 상관없이 영문, 한글 상관없이 일정하게 잘립니다.

스타일 ellipsis.css

@CHARSET"UTF-8"; 
@charset"utf-8"; 

.ellipsis
{
  line-height: 1.2em;
  height: 1.2em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  -o-text-overflow: ellipsis;
  -moz-binding: url(moz_fix2.xml#ellipsis);
}

.moz-ellipsis > DIV:first-child
{
  float: left;
  margin-right: -26px;
}
.moz-ellipsis > DIV + DIV
{
  float: right;
  margin-top: -1.2em;
  /*
  background: url(ellipsis.png) repeat-y;
  optimization for 
  */
  background: url("https://t1.daumcdn.net/cfile/tistory/2767E73F56E6E8EA32") repeat-y;
  padding-left: 26px;
}
.moz-ellipsis > DIV + DIV::after
{
  background-color: white;
  content: '...';
}

moz_fix2.xml

이 xml 파일은 파이오폭스에서도 ellipsis 가 동작하도록 하기 위한 파일입니다.

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:html="http://www.w3.org/1999/xhtml">

<binding id="ellipsis" applyauthorstyles="false">
	<implementation>
		<constructor><![CDATA[
			(function(block){
				setTimeout(function(){
					block.style.mozBinding = '';
  					var t = document.createElement('DIV');
					block.appendChild(t);
					block.appendChild(document.createElement('DIV'));
					while (block.firstChild != t)
				  		t.appendChild(block.firstChild);
					block.className = block.className + ' moz-ellipsis';
				}, 0);
			})(this);
		]]></constructor>
	</implementation>
</binding>

</bindings>