글자가 넘칠때 css

helloMihyun commented 5 years ago

https://webisfree.com/2015-08-17/[css]-text-overflow-%ED%85%8D%EC%8A%A4%ED%8A%B8%EA%B0%80-%EB%A7%8E%EC%9D%80-%EA%B2%BD%EC%9A%B0-%EC%83%9D%EB%9E%B5%EA%B8%B0%ED%98%B8%EB%A1%9C-%EB%B3%B4%EC%97%AC%EC%A3%BC%EA%B8%B0

helloMihyun commented 5 years ago

.tit_block {width:100%;height:80px;overflow:hidden;} // 말줄임이 되어야 할 부분을 감싸는 블럭 width나 height를 지정해주고 overflow:hidden;을 줘야함 .tit_block strong { display:-webkit-box; word-break:keep-all; white-space: inherit; //띄어쓰기에 대한 text-overflow:ellipsis; //글자가 넘치면 말줄임 -webkit-box-orient: vertical; //말줄임이 될 -webkit-line-clamp:2; //말줄임이 되는 글자줄 수 overflow:hidden; } 아쉽게도 웹킷 엔진의 브라우저만 가능하므로 호환을 위해서 스크립트를 사용하는 방법도 가능

helloMihyun commented 4 years ago

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .main_news > a .txt {} .main_news > a .txt { overflow: hidden; position: relative; line-height: 1.5em; max-height: 3em; text-align: justify; margin-right: -1em; padding-right: 1em; } .main_news > a .txt:before { content: '...'; position: absolute; right: 0; bottom: 0; } .main_news > a .txt:after { content: ''; position: absolute; right: 0; width: 1em; height: 1em; margin-top: 0.2em; background: white; border:1px solid red } } / IE에서 밑줄일을 해야 할 경우 >> 하지만 말 줄임이 필요 없는 글자가 포함 될 경우 처리가 안됨 /

helloMihyun commented 4 years ago

https://webdir.tistory.com/483

helloMihyun / study

글자가 넘칠때 css #15