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

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

있습니다div다음과 같은 CSS 스타일을 사용합니다.

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

내가 그 안에 넣으면,div긴 줄의 텍스트가 새 줄로 끊어지고 모든 텍스트가 표시됩니다.제가 원하는 것은 줄 바꿈이 없는 텍스트를 한 줄만 갖는 것입니다.텍스트가 길 때, 저는 이 넘치는 텍스트가 사라지길 바랍니다.

높이를 맞추려고 했는데 잘못된 것 같습니다.

글꼴과 동일한 높이를 추가하면 다른 브라우저에서 문제가 발생하지 않고 작동해야 하는 것이 아닐까요?

내가 어떻게 그럴 수 있을까?

한 줄로 제한하려면 다음을 사용합니다.white-space: nowrap;점괘로

만약 당신이 그 div에 여전히 더 많은 컨텐츠가 있다는 것을 나타내길 원한다면, 당신은 아마도 " 생략 부호"를 보여주고 싶을 것입니다.

text-overflow: ellipsis;

이것은 다음과 같이 추가되어야 합니다.white-space: nowrap;셉누이트가 제안한.

또한 Firefox에서 이 작업을 처리하려면 이 스레드를 체크아웃해야 합니다.

다음 CSS 코드를 사용할 수 있습니다.

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

CSS의 텍스트 오버플로 속성은 텍스트가 요소의 상자를 초과할 때 클리핑되는 상황을 처리합니다.잘라낼 수 있습니다(예: 잘라내기, 숨기기). 생략 부호('…', 유니코드 범위 값 U+2026).

텍스트 오버플로는 컨테이너의 오버플로 속성에 숨겨진 값(스크롤 또는 자동 및 공백: nowrap;)이 있는 경우에만 발생합니다.

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

UX와 UI를 위한 최고의 코드는

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

저는 이것을 사용함으로써 달성할 수 있었습니다.webkit-line-clamp그리고 다음의 css:

div {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

한 줄에 오버플로를 설정할 폭도 정의합니다.

다음을 사용하여 문제를 해결했습니다.

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

.txt1{width:100px;}
.txt2{width:200px;}
.mytext{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

<div class="txt1 mytext">
A B C D E F G H I K L M N O P Q R S T V X Y Z
</div>
<div class="txt2 mytext">
A B C D E F G H I K L M N O P Q R S T V X Y Z
</div>
<div class="txt3 ">
A B C D E F G H I K L M N O P Q R S T V X Y Z
</div>

추가로, 만약 당신이 긴 텍스트를 가지고 있다면 아래의 이 css 코드를 사용할 수 있습니다;

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

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

예, 한 줄 높이로 하고 싶다면,white-space: nowrap;재판관 명부에 올라 있는당신이 그것에 사용하는 것이 무엇이든 작동할 것입니다.

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

display: inline-block;

에서div문제의

언급URL : https://stackoverflow.com/questions/7546389/css-overflow-only-1-line-of-text