웹 - 말줄임표, 어떻게 처리하시나요? text-overflow: ellipsis를 사용해보세요.

고정폭이 아닌 반응형 사이즈의 경우, 한 줄에 제목을 표시하고 말줄임표 ... 을 나타내는 데에 난감한 경우가 많으셨을 겁니다.

많은 사람들이 아직도 스크립트 언어에서 문장의 글자수를 자르고 뒤에 ...을 붙이는데, 이렇게 할 경우 width를 픽셀이 아닌 %로 지정하면 화면에 따라 문장이 깨지게 됩니다.

다음 모바일 화면을 보시면 제목 뒤에 ... 이 붙어있을거에요.

아래 css는 다음 모바일에서 사용하는 제목의 css 입니다.

.ta_txt .link_txt {

    display: block;

    overflow: hidden;

    min-height: 17px;

    padding: 10px 12px 9px;

    line-height: 1.15;

    letter-spacing: -1px;

    white-space: nowrap;

    text-overflow: ellipsis;

}

폭이 충분히 넓을 경우 문장이 Full로 다 보이네요.

폭이 좁아진 경우 css를 이용하여 문장의 끝이 ...으로 처리됩니다.

 

 

 

포스팅 후에 발견하여 내용 보충합니다!

이렇게 다 적용을 해도 안되는 경우, F12키를 누르시고

다른 Element에서 상속된 word-wrap:break-word;가 있는지 확인해보세요.

만약 있다면, text-overflow: ellipsis; 의 바로 앞에  word-wrap:normal; 을 추가해 주시면 정상 동작합니다.

이녀석때문에 text-overflow:ellipsis; 동작을 하지 않았군요..