HTML5에서 텍스트 오버 플로우가 작동하지 않습니다.

다음 코드는 크롬에서 원하는대로 작동합니다. 하지만 Firefox 나 IE에는 없습니다. 이 코드에 <!DOCTYPE html> 태그를 추가하면 크롬에서도 작동하지 않습니다. text-overflow이 (가) 사용 중단 되었습니까? 모든 브라우저 및 HTML5와 호환되도록하려면 어떻게해야합니까?HTML5에서 텍스트 오버 플로우가 작동하지 않습니다.

<head> 

<style type='text/css'> 
table { 
    display: block; 
    margin: 30px 0 auto 0; 
    width: 100%; 
    max-width: 1300px; 
    text-align: left; 
    white-space: nowrap; 
    border-collapse: collapse; 
    z-index: -1; 
    table-layout:fixed; 
} 

td { 
    overflow: hidden; 
    white-space: nowrap; 
    word-wrap:break-word; 
    text-overflow:ellipsis; 
    border: 1px solid black; 
} 
</style> 
</head> 
<body> 
<table> 
    <tr> 
     <th style="width: 18%;">Col 1</th> 
     <th style="width: 12%;">Col 2</th> 
     <th style="width: 13%;">Col 3</th> 
     <th style="width: 7%">Col 4</th> 
     <th style="width: 7%">Col 5</th> 
     <th style="width: 6%">Col 6</th> 
     <th style="width: 5%">Col 7</th> 
     <th style="width: 13%">Col 8</th> 
     <th style="width: 16%">Col 9</th> 
     <th style="width: 3%">Col 10</th> 
    </tr> 
    <tr> 
     <td>Some</td> 
     <td>Data</td> 
     <td>Stuff</td> 
     <td>foo</td> 
     <td>bar</td> 
     <td>etc</td> 
     <td>whatever</td> 
     <td>stuff</td> 
     <td>Alotofdataikkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</td> 
     <td>Yes</td> 
    </tr> 
</table> 

</body>

이 제가 원하는 것입니다. enter image description here

출처

2013-05-14 Optimus Prime

어때? http://jsbin.com/okuqan/2/edit – Antony

여기를보세요 http://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell – Morpheus

모든 브라우저에서 지원됩니다. ... 여기에서 확인할 수 있습니다 : http://www.w3schools.com/cssref/css3_pr_text-overflow.asp –

당신은 텍스트 오버 플로우 속성을 잘못했다.

요소의 텍스트를 줄 바꾸려면 브라우저에서 텍스트 내용을 줄 바꿈하는 방법을 알 수 있도록 해당 요소의 너비 또는 최대 너비를 지정해야합니다.

[EDITED] 이 예 코드 :

<head> 

<style type='text/css'> 
table { 
    display: block; 
    margin: 30px 0 auto 0; 
    /*width: 100%;*/ 
    max-width: 900px; 
    text-align: left; 
    white-space: nowrap; 
    border-collapse: collapse; 
    z-index: -1; 
    table-layout:fixed; 
} 

td { 
    overflow: hidden; 
    white-space: nowrap; 
    word-wrap:break-word; 
    text-overflow: ellipsis; 
    border: 1px solid black; 
} 

.col1 { 
    width: 80px; 
} 
.col7 { 
    max-width: 300px; 
} 
.col8 { 
    max-width: 300px; 
} 
</style> 
</head> 
<body> 
<table> 
    <tr> 
     <th class="col1">Col 1</th> 
     <th class="col2">Col 2</th> 
     <th class="col3">Col 3</th> 
     <th class="col4">Col 4</th> 
     <th class="col5">Col 5</th> 
     <th class="col6">Col 6</th> 
     <th class="col7">Col 7</th> 
     <th class="col8">Col 8</th> 
     <th class="col9">Col 9</th> 
     <th class="col10">Col 10</th> 
    </tr> 
    <tr> 
     <td class="col1">Some</td> 
     <td class="col2">Data</td> 
     <td class="col3">Stuff</td> 
     <td class="col4">foo</td> 
     <td class="col5">etc</td> 
     <td class="col6">whatever</td> 
     <td class="col7">stuff</td> 
     <td class="col8">Alotofdataikkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</td> 
     <td class="col9">Yes</td> 
     <td class="col10">bar</td> 
    </tr> 
    <tr> 
     <td class="col1">Some</td> 
     <td class="col2">Data</td> 
     <td class="col3">Stuff</td> 
     <td class="col4">foo</td> 
     <td class="col5">etc</td> 
     <td class="col6">whatever</td> 
     <td class="col8">Alotofdataikkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</td> 
     <td class="col7">stuff</td> 
     <td class="col9">Yes</td> 
     <td class="col10">bar</td> 
    </tr> 
</table> 

</body>

여기서 데모 화면이다 enter image description here

출처

2013-05-14 07:44:08 LiuLang

하지만 모든 열의 최대 너비를 다르게 설정하려면? –

클래스를 사용하십시오. 이와 같이 : .col1 {max-width : 16 %;} col2 {max-width : 20 %;} ... 동일한 열의 td/th는 동일한 클래스 이름을 가져야합니다. – LiuLang

td에 최대 너비를 추가하십시오.

td{ 
    overflow: hidden; 
    white-space: nowrap; 
    word-wrap:break-word; 
    text-overflow:ellipsis; 
    border: 1px solid black; 
    max-width: 50px; 
}

출처

2013-05-14 07:35:16 ChamingaD

text-overflow: ellipsis이 HTML5에서 잘 작동한다. 나는 display: block이 약간의 문제를 만들고 있다고 생각한다. 그것을 제거하거나 display: table으로 바꾸고 작동하는지 확인하십시오.

출처

2013-05-14 08:16:21 qwerty

HTML5에서 텍스트 오버 플로우가 작동하지 않습니다.

답변

관련 문제