Top

[CSS] CSS로 긴 텍스트 자르기! | Web-Programing
김경훈 (admin) | Editor | 2014/04/15 09:35:49 | 조회:7446

white-space:nowrap; 

넓이를 지정하였더라도 자동으로 줄바꿈되지 않게 강제로 개행을 막아줌.

 

word-break:break-all;

문장을 띄어쓰기 할때 쓰인 공백기준이 아닌 문자단위로 끊어주는 속성

 

text-overflow:ellipsis;

텍스트가 넘칠때, 말줄임표( ... )가 나오게 하는 속성,
적용조건 white-space:nowrap;



※ IE에서는 상위 클레스에 word-break:break-all; 가 선언되있다면 text-overflow:ellipsis; 는 적용되지 않는다.

    IE에서 안된다면 상위! 또는 더 상위 클레스를 확인해봐야 한다.



제목 없음.png

이런식으로 마지막에 "..." 으로 대체 된다.

모바일 페이지나 테블릿 페이지같은 화면크기가 동적일 경우 사용하면 좋다!


  2. <style>
  3. .ellipsis{
  4.   min-width: 10px;
  5.   white-space:nowrap;
  6.   text-overflow:ellipsis;  /* IE, Safari */
  7.   -o-text-overflow:ellipsis;  /* Opera under 10.7 */
  8.   overflow:hidden;   /* "overflow" value must be different from "visible" */ 
  9.   -moz-binding: url('ellipsis.xml#ellipsis');
  10.  }
  11. </style>

[출처] white-space:nowrap;, word-break:break-all;, text-overflow:ellipsis; | 작성자 달콤쌉쌀


공유하기
공유하기
0
0
0


댓글을 불러오는 중입니다.
▲ 이전글 [CSS] DIV 중앙정렬 김경훈 (admin) 2014-05-09 11:09:11
▼ 다음글 [CSS] span 에 width 설정하는 방법 김경훈 (admin) 2014-04-03 08:57:57
페이지 로딩이 끝나면 해당 댓글로 이동 합니다.