[html/css] ie에서 table-cell 속성사용 시 word-break, word-wrap 자동 줄바꿈 안되는 경우 해결방법

[html/css] ie에서 table-cell 속성사용 시 word-break, word-wrap 자동 줄바꿈 안되는 경우 해결방법

2019/10/18 - [웹디자인/HTML,CSS] - [html/css] table-cell 속성을 이용해서 div 세로 가운데 정렬 하는 법

[html/css] table-cell 속성을 이용해서 div 세로 가운데 정렬 하는 법

 

바로 이전에 올렸던 글처럼(위 링크 참조) div에 display : table-cell; 속성을 주어 세로 중앙 정렬을 하게 되는 경우가 있는데, 이런 경우에 공백없는 외국어 텍스트를 div안에 넣으면 자동 줄바꿈이 되지 않아 레이아웃이 깨지는 문제를 발견했습니다. 저의 경우는 라오스어 였는데요.

 

크롬에서의 화면은 잘 나왔지만

word-break,word-wrap이 잘 적용되어있는 크롬

익스에서는 깨지게 됩니다.

 

익스플로러에서 라오어의 경우 word-break, wrod-wrap이 적용되지 않아 깨지는 문제발생

 

display:table-cell 속성을 이용할 때만 나타나는 문제였는데요. 세로 중앙정렬을 위해서 table-cell 속성을 반드시 써줘야만 했기 때문에 문제였습니다. 여러가지 방법으로 시도해보았지만 안되서 절망하다가 찾아낸 해답은 생각보다 간단했습니다.

 

 table-cell속성을 갖는 div안에 텍스트를 또 div로 감싸서 그 div에다가 word-break속성을 주는 것이였습니다. 

 

간단해서 써놓기 민망할 정도지만 그래도 혹시나 누군가에게 도움이 되었으면 좋겠습니다 ~

소스도 함께 첨부합니다. 감싸는 div는 인라인 형식으로 코딩하였습니다. 참고만 해주세요!~

 

---

CSS

<style>
.wrap{
	width:80%;
	margin:100px auto;
	border-top: 1px solid #efefef;
	border-left: 1px solid #efefef;
	overflow:hidden;
}
.img_box{
	width: 25%;
	display: inline-block;
	float: left;
	box-sizing: border-box;
	border-bottom: 1px solid #efefef;
	border-right: 1px solid #efefef;

}
.img_box img{
	width:40%; float:left;
}
.img_box > div{
	width:50%; padding:0px 5%; display:table-cell; font-size:13px; vertical-align:middle; height:152px; max-height:152px; overflow:hidden;
}
</style>

 

HTML

<div class="wrap">
	<div class="img_box">
		<img src="test-img.jpg">
		<div><div style="width:200px;word-wrap:break-word;word-break: break-all; display:inline-block;">ຄົ້ນຫາດ້ວຍຫົວຂໍ້ຄົ້ນຫາດ້ວຍຫົວຂໍ້ຄົ້ນຫາດ້ວຍຫົວຂໍ້ຄົ້ນຫາດ້ວຍຫົວຂໍ້ຄົ້ນຫາດ້ວຍຫົວຂໍ້ຄົ້ນຫາດ້ວຍຫົວຂໍ້ຄົ້ນ</div></div>
	</div>
	<div class="img_box">
		<img src="test-img.jpg">
		<div>옆에 있는 고양이는 제가 그린 고양이에요.</div>
	</div>
	<div class="img_box">
		<img src="test-img.jpg">
		<div>이렇게 글자수가 다양한 문장을 쓰다보면 가변적인 높이를 갖는 div를 갖게됩니다.</div>
	</div>
	<div class="img_box">
		<img src="test-img.jpg">
		<div>보통은 고정된 글자수나 높이를 가진 경우가 많지만 텍스트를 입력받아서 사용하는 경우엔 가변적인 높이를 갖게 될 수 밖에 없죠</div>
	</div>
	<div class="img_box">
		<img src="test-img.jpg">
		<div>이제 더이상은 쓸 말이 없네요.. 이게 첫번째 글인데 생각보다 블로그로 정보를 올린다는건 훨씬 더 어려운 일이네요.. </div>
	</div>
	<div class="img_box">
		<img src="test-img.jpg">
		<div>여태까지 다른분들이 올려놓은 글을 보기만 했었는데 공부도 할 겸 정리해서 올려보려고 합니다. </div>
	</div>
	<div class="img_box">
		<img src="test-img.jpg">
		<div>야옹이는 야옹</div>
	</div>
</div>

 

읽어주셔서 감사합니다.