css 단행, 다행 초과 디스플레이 생략호 호환 화호 구현

css 단행, 부분 초과 생략 표시

p{
   overflow:hidden;//      
   text-overflow:ellipsis;//         
   white-space:nowarp;//     
 }

보충: white-space, 요소 내 텍스트의 공백 문자, 줄 바꾸기 문자, 줄 바꾸기 허용 여부를 처리하는 데 사용됩니다.선택할 수 있는 값은normal(기본값),pre,nowrap,pre-wrap,pre-line입니다.word-wrap은 브라우저가 단어에서 문장을 끊는 것을 허용하는지 표시하는 데 사용되며, 문자열이 너무 길어서 자연스러운 문장을 찾을 수 없을 때 넘침 현상을 방지하기 위해서입니다.선택 값break-word word-break은 단어 내의 단문을 어떻게 하는지 표시하는 데 사용됩니다.기본값normal, 선택할 수 있는 값은break-all,keep-all입니다.
css 여러 줄 텍스트가 줄임표 보이기 초과

p{
  overflow:hidden;//      
  text-overflow:ellipsis;//         
  display:-webkit-box;//               
  -webkit-box-orient:vertical;//                 
  -webkit-box-clamp:2//      ，      
}

그래서 불여우에서 - 웹키트-box-clamp:2는 효력이 발생하지 않습니다
여우의 여러 줄 텍스트가 줄임표를 초과합니다
우선 스타일 코드가 불여우에만 적용되려면

@-moz-documentc url-prefix(){
  p{
    position: relative; 
    line-height: 20px;
    max-height: 40px;//      ，  overflowhidden，     ，       
    overflow: hidden;
   }
   p::after{
    content: "..."; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    padding-left: 40px;//      ，      ，   ...      
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);//                 
  }
}

원리는 자기가 한 줄... 마지막 줄의 끝에 놓는 것이다.