div 내에서 너무 긴 텍스트 자르기

<div style="display:inline-block;width:100px;">

very long text
</div>

순수한 CSS를 사용하여 다음 새 줄에 표시하지 않고 너무 긴 텍스트를 자르고 최대 100px 만 표시하는 방법

<div class="crop">longlong longlong longlong longlong longlong longlong </div>​

이것은 내가 생각할 수있는 한 가지 가능한 접근 방식입니다.

.crop {width:100px;overflow:hidden;height:50px;line-height:50px;}​

이렇게하면 긴 텍스트는 여전히 줄 바꿈되지만 overflow설정 으로 인해 표시되지 않으며 line-height동일한 설정 height을 통해 한 줄만 표시되도록합니다.

여기 데모 와 대화 형 예제와 함께 멋진 오버플로 속성 설명을 참조하십시오 .

당신이 사용할 수있는:

overflow:hidden;

영역 외부의 텍스트를 숨 깁니다.

마지막 문자가 잘릴 수 있으므로 마지막 문자의 일부가 계속 표시됩니다. 더 좋은 방법은 끝에 줄임표를 표시하는 것입니다. 다음을 사용하여 수행 할 수 있습니다 text-overflow.

overflow: hidden;
white-space: nowrap; /* Don't forget this one */
text-overflow: ellipsis;

.crop { 
  overflow:hidden; 
  white-space:nowrap; 
  text-overflow:ellipsis; 
  width:100px; 
}​

http://jsfiddle.net/hT3YA/

상대 단위를 사용하지 않는 이유는 무엇입니까?

.cropText {
    max-width: 20em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

아래 코드는 사용자가 결정한 고정 너비로 ​​텍스트를 숨 깁니다. 반응 형 디자인에는 적합하지 않습니다.

.CropLongTexts {
  width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

최신 정보

(모바일) 장치에서 텍스트가 (고정 너비)로 인해 서로 섞인 것을 발견했습니다 ... 그래서 위의 코드를 편집하여 다음과 같이 반응 적으로 숨겨졌습니다.

.CropLongTexts {
  max-width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

(최대 너비)는 텍스트가 (화면 크기)에 상관없이 반응 적으로 숨겨지고 서로 섞이지 않도록합니다.