게시판에서 글제목을 한줄로 표현하고 자르는 css > 개발

• 목록

• 페이스북 공유
• 트위터 공유

1. table 태그를 이용하는 방법

게시판 목록에서 제목이 줄바꿈되어서 두줄로 내려가지 않게 하는 방법으로..
보통 table 태그에  style="table-layout:fixed;" 를 붙이는 방법을 많이 사용한다.


2. div 태그를 이용하는 방법

그러나, table 태그에 table-layout 을 설정하지 않고
div 태그 만으로 하는 방법이 있다.

방법으로는..
스타일로 overflow:hidden; 을 설정하는 방법은 많이 알려져 있는 방법이다.
여기에 height 를 지정해 주면 된다.

코딩은 아래와 같다.
[code]
<div style='height:16px;overflow:hidden;'>가나다라마바사아</div>
[/code]


3. max-width 를 지정해야 한다.

[code]
.title {
max-width:100px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
[/code]

text-overflow:ellipsis 를 하면, 뒤에 ... 이 붙는다.

* 참고 : https://www.w3schools.com/cssref/css3_pr_text-overflow.asp





ㅁ li 태그가 두줄로 내려가지 않게 하기

[code]
<ul>
<li style='white-space:nowrap;overflow:hidden;'>가나다라마바사아</li>
</ul>
[/code]
코드를 설명하자면,
white-space:nowrap; 은 두줄로 내려가지 않고 한줄로 주~욱 옆으로 써지게 한다.
overflow:hidden; 은 한줄로 오바된 것을 hidden 시켜 준다.
ul 이나 그 상위 태그에 가로 사이즈가 지정이 되어 있어야 되는 것 같다.

추천0