집 > 기사 > 웹 프론트엔드 > 테이블의 콘텐츠 오버플로를 처리하는 방법

테이블의 콘텐츠 오버플로를 처리하는 방법

php中世界最好的语言원래의: 2018-01-23 10:25:204153검색

이번에는 테이블의 콘텐츠 오버플로를 처리하는 방법을 보여 드리겠습니다. 테이블의 콘텐츠 오버플로를 처리할 때 주의 사항은 무엇입니까?

콘텐츠 오버플로란 무엇인가요? 실제로 텍스트가 많을 때 콘텐츠 영역이 그만큼 길면 추가 부분이 점으로 대체됩니다.

이번에 수행할 사례는 테이블에 너무 많은 텍스트를 입력하면 테이블이 엉망이 된다는 것을 알고 있습니다. 예를 들어 줄이 너무 길거나 줄이 자동으로 줄 바꿈됩니다. 그러나 때로는 고정된 너비로 행에 표시하고 싶을 때도 있습니다. 추가 부분을 점으로 대체하면 테이블이 복잡해지지 않습니다. 그럼 무엇을 해야 할까요?

일반적으로 다음 속성을 사용합니다

/*溢出部分样式*/  
.txt-ell {   
    whitewhite-space:nowrap;  //强制在一行显示   
    overflow:hidden;    //溢出的内容切割隐藏   
    text-overflow:ellipsis; //当内联溢出块容器时，将溢出部分替换为…   
    word-break:keep-all;  //允许在单词内换行   
    color: red;  //这里我自己标识一下   
    padding: 0 7px;  //由于想跟边线留有距离，所以设置了下   
}

.table-fix {   
    table-layout:fixed;     
}

우선, 두 번째 스타일은 특별히 테이블 태그에 추가됩니다. 콘텐츠 오버플로를 달성하려면 테이블의 너비와 높이가 고정되어 있어야 하며, tr은 테이블 내부의 td도 너비와 높이가 고정되어 있어야 합니다. 콘텐츠 오버플로를 사용하기 전에 먼저 테이블에 table-fix 클래스를 추가해야 합니다. 그런 다음 tr과 td에 너비가 지정되어 있는지 확인하세요. 그렇지 않은 경우 고정 너비나 백분율을 지정하는 것이 가장 좋습니다. 저는 주로 백분율을 지정하는데, 외부 테이블에는 고정 너비가 있고 내부의 tr과 td는 그 안에 있습니다. 콘텐츠 오버플로 스타일을 사용할 수 있는 백분율 너비입니다. 마지막으로, 어떤 그리드에 콘텐츠가 많고 조금이라도 달성하고 싶다면 이 그리드에 .txt-ell 클래스를 추가하세요.

이 사례를 읽고 나면 더 흥미로운 내용을 확인하실 수 있을 것입니다. , 온라인에서 PHP 중국어 기타 관련 기사를 주목해 주세요!