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

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

---

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

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

---

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

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

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

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

---

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

white-space: nowrap

---

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

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

---

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

---

명확하게하기 위해 단락 및 헤더 등에서 잘 작동합니다 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>

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

참고 URL : https://stackoverflow.com/questions/572298/how-to-stop-text-from-taking-up-more-than-1-line