배경색을 가진 텍스트의 한 줄을 오버플러시킬 때 불필요한 배경색 문제를 해결하는 방법은 무엇입니까?

한 줄의 텍스트로 타원의 오버 플로우에 대한 솔루션이 중복 배경을 유발합니다.

CSS에서 text-overflow: ellipsis 사용하여 단일 라인 텍스트 오버플로를 처리 할 때 텍스트에 배경색이 있으면 마지막 문자의 배경 색 잔류 물이 종종 발생합니다. text-overflow: ellipsis 선의 요소에 작용하는 반면, 배경색은 텍스트 요소 자체에 적용되므로 잘린 후 배경색이 표시됩니다.

다음 그림은 문제의 예를 보여줍니다.

문제에 대한 CSS 및 HTML 코드는 다음과 같습니다.

 .Oneline {
  너비 : 640RPX;
  오버플로 : 숨겨진;
  텍스트 오버 플로우 : 일방시스;
  흰색 공간 : Nowrap;
  텍스트 {
    배경색 : #999999;
    패딩 : 4RPX 8RPX;
    마진 오른쪽 : 12RPX;
  }
}

<view class="oneline"><text wx:for="{{flavorsarr}}" wx:key="index"> {{item.label}}</text></view>

솔루션은 text 요소의 디스플레이 메소드를 inline-block 으로 수정하는 것입니다. inline-block 요소는 전체 블록으로 처리 될 수 있으며, 간단한 인라인 요소 자리로 인한 배경 색 잔류 문제를 피할 수 있습니다.

수정 된 CSS 코드는 다음과 같습니다.

 .Oneline {
  너비 : 640RPX;
  오버플로 : 숨겨진;
  텍스트 오버 플로우 : 일방시스;
  흰색 공간 : Nowrap;
  텍스트 {
    디스플레이 : 인라인 블록; / *는 인라인 블록으로 수정되었습니다 */
    배경색 : #999999;
    패딩 : 4RPX 8RPX;
    마진 오른쪽 : 12RPX;
  }
}

text 요소를 inline-block 으로 설정하면 텍스트 자르기는 전체 요소를 기반으로하며 불필요한 배경 색상의 모양을 효과적으로 피하고 텍스트 오버플리링 엘리석시스의 더 나은 시각적 효과를 보장합니다.

위 내용은 배경색을 가진 텍스트의 한 줄을 오버플러시킬 때 불필요한 배경색 문제를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!