이 기술에 대한 몇 가지 합법적인 사용 사례가 있습니다. 예를 들어, 제목과 설명이 있는 테이블이 있을 수 있습니다. 제목을 위한 공간을 더 확보하려면 작은 뷰포트에서 한 줄로 설명을 한 줄로 제한하고 이 항목에 대한 세부 정보 페이지에서 설명을 반복합니다.
그러나 버튼이나 양식 레이블과 같은 항목에 사용하여 더 멋지게 보이도록(?)하거나 세로로 정렬할 때 자주 봅니다. 그러나 뷰포트를 변경하거나 텍스트 크기를 조정하면 텍스트 끝이 사라집니다.
나는 "... 특정 상황에서 사용된다면"이 거기에 속한다고 생각하지만, 그것이 없으면 확실히 더 나은 블로그 게시물 제목을 만듭니다. Eric이 말했듯이 텍스트 자르기에 대한 합법적인 사용 사례가 있습니다. 일부일 수도 있지만 그럼에도 불구하고 합법적입니다.
궁극적인 목표는 데이터 "손실"을 방지하는 것입니다. CSS에서 확실히 일어날 수 있는 일. 컨테이너를 실수로 오버플로하는 텍스트는 단순히 존재하지 않는다는 의미에서 손실됩니다. 그리고 그 텍스트가 단순히 존재하지 않는다면, 그것이 웹에 게시된 가장 훌륭하고 잘 만들어진 클릭 유도문안이라 할지라도 사용자는 그것을 놓칠 것입니다.
Eric은 다음과 같이 텍스트를 자르는 방법이 없다고 지적합니다. text-overflow: ellipsis 보이는. 한 번 사라지면 사라진다(스크린 리더가 그것을 발표하는 것처럼 보이지만). 거의 데이터가 손실되었습니다. 괜찮을 수도 있습니다. 무슨 일이 일어나고 있는지, 그것이 의도된 것인지 알면 좋습니다.
그러나 여기에 내가 이것을 공유하고 싶게 만든 Eric이 말한 것이 있습니다.
콘텐츠를 디자인에 맞게 제한하지 말고 CSS를 유연하게 만들어 긴 단어를 우아하게 처리하세요.
다시, 당신은 수도 디자인에 내용을 일치시키고 싶습니다. 하지만 나는 아마도 Eric처럼 다음과 같이 주장할 것입니다. 디자인은 콘텐츠에 맞게 조정되어야 합니다. 오히려 다른 방법보다. 페이지의 텍스트가 중요하지 않거나 CSS 속성에 의해 결정된 임의의 지점에서 잘리면 멋질 정도로 목적이 없는 상황을 회상하는 데 어려움을 겪습니다. 각 게시물이 자르기 전에 게시물 콘텐츠의 발췌 부분을 표시하는 블로그 게시물 아카이브일 수 있지만 정확히 사용 사례는 아닙니다. text-overflow: ellipse.
CSS에는 다양한 길이의 텍스트를 고려하여 유연한 디자인을 만드는 도구가 있습니다. 그래서 아마도 측면에서 실수 방어적인 CSS 작성… 문제를 예상하고 다양한 콘텐츠 시나리오를 우아하게 처리하는 방법을 알고 있는 CSS. text-overflow: ellipsis 이를 위한 CSS 무기고의 일부일 수 있습니다. 그러나 그것은 또한 목욕 물과 함께 아기를 밖으로 던질 수도 있습니다. 해당 데이터를 잃는 것이 이발을 제공하기 전에 해당 콘텐츠가 수행해야 하는 비용의 가치가 있는지 물어볼 가치가 있습니다.
텍스트 자르기에 대해 이야기하는 동안…
Line Lampin'(여러 줄 텍스트 자르기)
비대칭 디자인 수용
Flexbox와 텍스트 줄임표를 함께 사용하기
'더보기' 버튼이 있는 잘린 여러 줄 텍스트
텍스트 오버플로: 줄임표가 유해한 것으로 간주됨 원래에 게시 CSS 트릭. 너는해야한다. 뉴스레터 받기.
