텍스트가 한 줄 이상을 차지하지 못하게하는 방법은 무엇입니까?

332

텍스트 줄 바꿈을 중지시키는 자동 줄 바꿈 또는 다른 속성이 있습니까? 높이가 있고 overflow:hidden이며 텍스트가 여전히 끊어집니다.

CSS3 이전의 모든 브라우저에서 작동해야합니다.

— 허쉬 우드
소스

631

div {
  white-space: nowrap;
  overflow: hidden;
}

<div>test that doesn't wrap</div>

스 니펫 확장

참고 : 이것은 블록 요소에서만 작동합니다. 예를 들어 테이블 셀 에이 작업을 수행 해야하는 경우 테이블 셀에 블록이 아닌 테이블 셀이 있으므로 테이블 셀 안에 div를 배치해야합니다.

CSS3부터는 테이블 셀에서도 지원됩니다.

— 클레 투스
소스

12

공백! 그게 내가 찾던 것입니다 ... 1,000 감사합니다 ... 이것은 구글에 불가능합니다!

2

IIRC (word-wrap)라는 바보 같은 속성도 있습니다. 바보 같은 IE.

— garrow

21

"텍스트 오버플로 : 줄임표"도 고려하십시오. 컨테이너 너비의 경계를 벗어나면 텍스트 끝에 ...를 추가합니다.

— Drew Landgrave

1

"이것은 블록 요소에서만 작동합니다"라는 의견이 맞습니다. 앵커, 단락, 제목 등에서 이것을 시도하면 작동하지 않습니다. 당신은 같은 것을 할 필요가p.oneline { white-space:nowrap; overflow:hidden; display:block;}

— 알렉스 안젤리

오버플로를 숨기는 것을 조심하십시오. 그것은 사업을 의미합니다.

— David A. Grey

57

CSS white-space Property이것을 달성하기 위해 사용할 수 있습니다 .

white-space: nowrap

— 로버트 C. 바스
소스

36

줄임표를 사용하면 마지막에 ...가 추가됩니다.

   <style type="text/css">
    div {
      white-space: nowrap;
      overflow: hidden;
text-overflow: ellipsis;
    }
    </style>

— 비벡
소스

4

때로는  공백 대신 사용하는 것이 좋습니다. 그러나 분명히 단점이 있습니다.

— 그로스 보겔
소스

불행히도, 나는이 상황에서 그것을 할 수 없습니다

2

명확하게하기 위해 단락 및 헤더 등에서 잘 작동합니다. display: block . 됩니다.

예를 들어 :

<h5 style="display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden">
  This is a really long title, but it won't exceed the parent width
</h5>

(인라인 스타일을 용서하십시오)

— 던컨 존스
소스