래퍼 내 두 범위 중 하나의 텍스트 오버플로 줄임표

래퍼 내 두 범위 중 하나의 텍스트 오버플로 줄임표

---

줄임표에 문제가 있습니다. 내 HTML은 다음과 같습니다.

<div id="wrapper">
    <span id="firstText">This text should be effected by ellipsis</span>
    <span id="lastText">this text should not change size</span>
</div>

순수한 CSS로 이것을 수행하는 방법이 있습니까? 내가 시도한 것은 다음과 같습니다.

#firstText
{
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

#lastText
{
    white-space:nowrap;
    overflow:visible;   
}

다음과 같이 표시됩니다.

이 텍스트는 줄임표로 표시되어야합니다.

이것이 내가 원하는 결과이지만 :

이 텍스트는 e 여야합니다 ...이 텍스트는 크기를 변경해서는 안됩니다.

---

width다음 #firstText과 같이 줄 수 있습니다 .

#firstText
{
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    width:150px;
    display:inline-block;
}

이 예를 확인하십시오.

http://jsfiddle.net/Qhdaz/5/

---

스팬의 순서를 변경하고 첫 번째 스팬에 부동 소수점을 부여하여이를 달성 할 수 있습니다. 이렇게하면 요소에 너비를 설정할 필요가 없습니다.

#firstText
{
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#lastText
{
    float:right;
    white-space:nowrap;
}

<div id="wrapper">
    <span id="lastText">this text should not change size</span>
    <span id="firstText">This text should be effected by ellipsis</span>
</div>

---

아직 처리되지 않은 작은 케이스가 있습니다.

알 수 없거나 동적 래퍼 크기가 있고 첫 번째 자식이 사용 가능한 모든 공간을 차지하지만 여전히 너무 긴 경우 줄임표를 사용하려는 경우.

Here is my solution using flex CSS properties :

#wrapper{
    display: inline-flex;
    flex-flow:row nowrap;
    max-width:100%; /* or width:100% if you want the spans to take all available space */
}
#firstText{
    flex:1;
    white-space:pre;
    overflow: hidden;
    text-overflow: ellipsis;
}
#lastText{
    white-space:nowrap;
}

---

You could fake it like this: change your span to div and change your CSS:

#firstText
{
    float: left;
    width: 250px;
    height: 20px;
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

#lastText
{
    float: left;
    white-space:nowrap;
    overflow:visible;   
}

ReferenceURL : https://stackoverflow.com/questions/8122042/text-overflow-ellipsis-on-one-of-two-spans-inside-a-wrapper