텍스트 오버플로 : 줄임표가 작동하지 않습니다

이것이 내가 시도한 것입니다 ( 여기 참조 ).

body {
    overflow: hidden;
}

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
}

기본적으로 창을 작게 만들 때 스팬을 줄임표로 축소하고 싶습니다. 내가 뭘 잘못 했어?

당신은 CSS가 필요합니다 overflow, width(또는 max-width) display,과 white-space.

http://jsfiddle.net/HerrSerker/kaJ3L/1/

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden
}

부록 라인 클램핑 (멀티 라인 오버 플로우 타원)을 수행하는 기술에 대한 개요를 보려면 다음 CSS 트릭 페이지를 참조하십시오. https://css-tricks.com/line-clampin/

부록 2 (2019 년 5 월)
이 링크에서 주장하는 것처럼 Firefox 68은 -webkit-line-clamp(!)를 지원합니다 .

블록 요소, 최대 크기가 있는지 확인하고 overflow를 hidden으로 설정하십시오. (IE9 및 FF 7에서 테스트)

http://jsfiddle.net/uh9zD/

div {
    border: solid 2px blue;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 50px;
}

Chrome에서 여러 줄을 사용하는 경우 :

display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // max nb lines to show
-webkit-box-orient: vertical;

YouTube에서 영감을 얻었습니다. ;-)

크롬에서 줄임표에 문제가있었습니다. 공백 켜기 : nowrap이 문제를 해결 한 것 같습니다.

max-width: 95px;
max-height: 20px;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: solid 1px black;
font-size: 12pt;
text-align: right;
white-space: nowrap;

word-wrap: break-word;

이것과 이것 만이 나를 위해 일을했습니다.

<pre> </pre> 

꼬리표

다른 것들은 줄임표를하지 못했습니다 ....

이 문제를 우연히 발견 할 수있는 사람을위한 헤드 업입니다.

text-rendering: optimizelegibility; 
//Changed to text-rendering: none; for fix

줄임표를 허용하지 않았습니다. 분명히 이것은 매우 까다로운 것입니까?

아래 코드를 추가하여 원하는 위치에 추가하십시오.

예

p{
   display: block; /* Fallback for non-webkit */
   display: -webkit-box;
   max-width: 400px;
   margin: 0 auto;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
 }

여러 줄

크롬에서 여러 줄에 줄임표를 적용 해야하는 경우이 CSS를 적용 할 수 있습니다.

CSS에 너비 를 추가 하여 특정 너비의 요소를 지정할 수도 있습니다 .

.multi-line-ellipsis {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

<p class="multi-line-ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

CSS에 다음을 추가하여 줄임표를 사용해보십시오.

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

그러나이 코드는 한 줄 트림에만 적용되는 것처럼 보입니다. 텍스트를 자르고 줄임표를 표시하는 다른 방법은 다음 웹 사이트에서 찾을 수 있습니다. http://blog.sanuker.com/?p=631

줄임표가 작동하도록 CSS에 다음 줄을 추가하십시오.

 p {
     display: block; // change it as per your requirement
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }

그 우리의 사람들을 위해 고정 폭을 사용하지 않는 , 그것은 또한 사용하여 작동합니다 display: inline-grid. 필요한 속성과 함께 추가하면됩니다.display

span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-grid;
}