집 > 기사 > 웹 프론트엔드 > CSS에서 td 오버플로 숨기기를 설정하는 방법

CSS에서 td 오버플로 숨기기를 설정하는 방법

醉折花枝作酒筹원래의: 2021-04-21 18:06:074049검색

방법: 먼저 "word-break:keep-all" 문을 사용하여 줄 바꿈을 설정하지 않은 다음 "overflow:hidden" 문을 사용하여 숨겨진 부분을 설정합니다. 오버플로 표시 줄임표를 설정합니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

td 오버플로 숨기기

table{
        width:100px;
        table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
    }
    td{
        width:100%;
        word-break:keep-all;/* 不换行 */
        white-space:nowrap;/* 不换行 */
        overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
        text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用*/
    }

모든 코드:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>document</title> 
<style>
table{
        width:100px;
        table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
    }
    td{
        width:100%;
        word-break:keep-all;/* 或是 white-space:nowrap;不换行 */
        overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
        text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用*/
    }
</style>
</head> 
<body>
    <table border="1">
        <tr>
            <td>19999</td>
            <td>19999</td>
        </tr>
        <tr>
            <td>19999</td>
            <td>19999</td>
        </tr>
        <tr>
            <td>19999</td>
            <td>19999</td>
        </tr>
    </table>
</body> 
</html>

효과 스크린샷:

CSS에서 td 오버플로 숨기기를 설정하는 방법

추천 학습: css 비디오 튜토리얼

위 내용은 CSS에서 td 오버플로 숨기기를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

html5 css css3 break overflow td word

성명：

이전 기사：CSS에서 확대/축소를 설정하는 방법다음 기사：CSS에서 확대/축소를 설정하는 방법