특정 영역의 문자를 ... 으로 표현하는 방법

<div>
  The brown fox jumps over the lazy dog
</div>

div {
  background-color: orange;
  font-size: 30px;
  padding: 20px;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

확인

 

필터 처리 방법

div {
  background-color: orange;
  font-size: 30px;
  padding: 20px;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}

div::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  border: 4px solid red;
  box-sizing: border-box;
/*  흐림 처리, 배경을 회색으로  */
  backdrop-filter: blur(4px) grayscale();
  
}

확인

관련 문서

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

white-space - CSS: Cascading Style Sheets | MDN