텍스트 표시: 줄임표가 작동하지 않습니다.

텍스트 표시: 줄임표가 작동하지 않습니다.

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

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
}

body {
    overflow: hidden;
}

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

<span>Test test test test test test</span>

---

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

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

블록 요소, 최대 크기 및 오버플로를 숨김으로 설정해야 합니다. (IE9 및 FF7에서 테스트됨)

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;

유튜브에서 영감을 받았습니다 ;-)

여러 줄의 경우

크롬에서는 여러 줄에 줄임표를 적용해야 할 경우 이 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>

word-wrap: break-word;

이것과 오직 이것만이 나에게 잠시 일을 해주었습니다.

<pre> </pre> 

꼬리표를 달다

다른 모든 것들은 생략법을 실행하는 데 실패했습니다.

이걸 우연히 발견할 수도 있는 사람은 누구든지...나의 h2는 상속받고 있었습니다.

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

생략을 허용하지 않는 것이었습니다.보아하니 이것은 매우 미세한 열쇠인 것 같군요, 그렇죠?

저는 크롬 밑에 있는 타원에 문제가 있었습니다.흰색 공간을 켜는 것: 랩이 그것을 고치는 것처럼 보였습니다.

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;

고정 너비 없음

고정 너비를 사용하지 않으려는 사용자를 위해 다음을 사용할 수도 있습니다.display: inline-grid필요한 속성과 함께 다음을 추가합니다.display

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

원하는 위치에 이 코드를 추가합니다.

예

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에 다음을 추가하여 생략 부호를 사용할 수 있습니다.

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

하지만 이 코드는 한 줄 트림에만 적용되는 것 같습니다.텍스트를 트리밍하고 생략 부호를 표시하는 더 많은 방법은 다음 웹 사이트에서 찾을 수 있습니다. http://blog.sanuker.com/ ?p=631

이 코드는 잘 작동할 것이고 또한 덕분입니다.titleHTML 프롭은 기본적으로 전체 텍스트를 표시합니다.

.truncated {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis; 
  /* Optional: set a fixed max-width or width to the element if needed */
  max-width: 200px; /* max-width: 100%; also works */
}

<div class="truncated" title="This is a long text that will be truncated, but showed on hover">
  This is a long text that will be truncated, but shown on hover
</div>

생략 부호가 작동하도록 CSS에 다음 행 추가

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

사용자:

• overflow-x: clip그냥 수평으로 접는 것.
• white-space: nowrap새로운 노선을 피함
• text-overflow: ellipsis추가로...마지막에

overflow-x: clip;
white-space: nowrap;
text-overflow: ellipsis;

다음과 같이 표시되는 것을 고려하십시오.flex작동하지 않습니다. 필요에 맞는 것으로 변경하십시오.

언급URL : https://stackoverflow.com/questions/7993067/text-overflow-ellipsis-not-working