CSS 오버플로-한 줄의 텍스트

나는이 div다음 CSS 스타일로 :

width:335px; float:left; overflow:hidden; padding-left:5px;

div긴 줄의 텍스트 를 삽입 하면 새 줄로 바뀌어 모든 텍스트가 표시됩니다. 내가 원하는 것은 줄 바꿈되지 않는 한 줄의 텍스트 만 갖는 것입니다. 텍스트가 길면 넘쳐나는 텍스트가 사라지기를 원합니다.

높이 설정에 대해 생각하고 있었지만 잘못된 것 같습니다.

어쩌면 글꼴과 동일한 높이를 추가하면 다른 브라우저에서 문제가 발생하지 않고 작동해야합니까?

어떻게해야합니까?

한 줄로 제한 white-space: nowrap;하려면 div 에서 사용 하십시오.

해당 div에 여전히 더 많은 콘텐츠가 있음을 나타내려면 "줄임표"를 표시 할 수 있습니다.

text-overflow: ellipsis;

이것은 white-space: nowrap;Septnuits 가 제안한 것 외에 추가되어야합니다 .

또한 이 스레드 를 체크 아웃 하여 Firefox에서 처리하십시오.

이 CSS 코드를 사용할 수 있습니다 :

text-overflow: ellipsis; 
overflow: hidden; 
white-space: nowrap;

CSS 의 text-overflow 속성은 텍스트가 요소 상자에 넘칠 때 잘리는 상황을 처리합니다. 그것은 할 수 클리핑 (즉 차단, 숨겨진), 표시 생략 부호 ( '...', 유니 코드 범위 값 U + 2026).

참고 텍스트 오버 플로우는 컨테이너의 오버 플로우 속성 값이있는 경우에만 발생 숨겨진 , 스크롤 또는 자동 및 공백 : 파라미터 nowrap을; .

텍스트 오버플로는 블록 또는 인라인 블록 레벨 요소 에서만 발생할 수 있습니다 . 요소에 오버플로가 발생하려면 너비가 있어야하기 때문입니다. 방향 속성 또는 관련 속성에 의해 결정된 방향으로 오버플로가 발생합니다.

UX 및 UI에 가장 적합한 코드는

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inherit;

또한 텍스트가 긴 경우이 CSS 코드를 사용할 수 있습니다.

text-overflow: ellipsis;
overflow: visible;
white-space: nowrap;

전체 줄 텍스트를 표시합니다.

width:200px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

한 줄에 오버플로를 설정하기 위해 너비를 정의하십시오.

나는 같은 문제가 있었고 다음을 사용하여 해결했습니다.

display: inline-block;

온 div의 질문입니다.