웹 개발

[css] word-wrap

노루아부지 2019. 8. 15. 11:55
<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>
728x90

'웹 개발' 카테고리의 다른 글

[html] table tag  (0) 2019.08.15
[javascript] trim function  (0) 2019.08.15
jqgrid에서 json, xml 사용법  (0) 2019.08.15
[java] UTF-8로 된 파일 읽어서 String으로 저장하기  (0) 2019.08.15
java 디렉토리(폴더) 생성  (0) 2019.08.15
loading