관리 메뉴

I LOVE EJ

[css] word-wrap 본문

Web publishing/HTML & CSS

[css] word-wrap

BeOne 2010. 11. 12. 19:40

그냥 일반적으로 검색해서 나오는 word-wrap 방법들은 뭔가 하나씩 안됨.
테스트 결과 다 되는 것 찾았음.. 

<style type="text/css">
table {
 table-layout:fixed;

p {
 width: 300px;
 border:1px solid red;
 word-wrap:break-word;
 word-break:break-all;
}
.wordBreak {
 font-size:0;
 line-height:0;
}

</style>

<script type="text/javascript">
//<![CDATA[
function wordBreak(element) {
 element.innerHTML = element.innerHTML.split('').join('<span class="wordBreak"> </span>');
}
//wordBreak(document.getElementsByTagName('div')[0]);
wordBreak(document.getElementsByTagName('p')[0]);
//]]>
</script>

 <table border="1" width="500px">
 <tr>
  <td width="100px">가나다라</td>
  <td width="300px"><p>
 http://search.naver.com/search.naver?where=nexearch&query=%BC%D2%B3%E0%BD%B4%EB+%C4%AB+%B8%F1%B7%CF&sm=top_hty&fbm=1
 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십
 </p>

</td>

  <td width="100px">가나다라</td>
 </tr>
</table>

 </body>
</html>