Làm cách nào để giới hạn ô bảng thành một dòng văn bản bằng CSS?

Question

Tôi có một bảng người dùng trong đó mỗi hàng có chứa tên, địa chỉ e-mail của họ và như vậy. Đối với một số người dùng hàng này là một dòng văn bản cao, đối với một số người khác hai, vv Nhưng tôi muốn rằng mỗi hàng của bảng là một dòng văn bản cao, cắt ngắn phần còn lại.

tôi thấy hai câu hỏi sau:

• A column of a table needs to stay in one line (HTML/CSS/Javascript)
• CSS: limit element to 1 line

Trong thực tế câu hỏi của tôi là chính xác tương tự như người đầu tiên, nhưng kể từ khi liên kết là chết tôi không thể nghiên cứu nó. Cả hai câu trả lời đều nói sử dụng white-space: nowrap. Tuy nhiên điều này không làm việc, có lẽ tôi đang thiếu một cái gì đó.

Vì tôi không thể hiển thị cho bạn mã, tôi sao chép các vấn đề:

<style type="text/css"> 
td { 
    white-space: nowrap; 
    overflow: hidden; 
    width: 125px; 
    height: 25px; 
} 
</style> 

<div style="width:500px"> 
<table> 
    <tr> 
     <td>lorem ipsum here... blablablablablablablablablabla</td> 
     <td>lorem ipsum here... blablablablablablablablablabla</td> 
     <td>lorem ipsum here... blablablablablablablablablabla</td> 
     <td>lorem ipsum here... blablablablablablablablablabla</td> 
    </tr> 
</table> 
</div> 

Without white-space bảng là 500px rộng, và các văn bản phải mất hơn một dòng.

Nhưng white-space: nowrap làm cho trình duyệt chỉ cần bỏ qua chỉ thị width và tăng chiều rộng của bảng cho đến khi tất cả dữ liệu phù hợp trong một dòng.

Tôi đang làm gì sai?

Answer 1

tràn sẽ chỉ hoạt động nếu biết nơi bắt đầu xem xét nó bị tràn. Bạn cần phải thiết lập chiều rộng và chiều cao thuộc tính của <td>

mất 2

Hãy thử thêm table-layout: fixed; width:500px; để phong cách của bảng.

CẬP NHẬT 3

xác nhận điều này làm việc: http://jsfiddle.net/e3Eqn/

Answer 2

Thêm dòng sau vào stylesheet của bạn:

table{ 
    width: 500px; table-layout:fixed; 
} 

Bạn cần phải thêm chiều rộng bảng để đảm bảo rằng các tài sản tiếp theo sẽ phù hợp các phần tử theo kích thước được chỉ định. Thuộc tính bố cục bảng ở đây buộc trình duyệt sử dụng bố cục cố định trong phạm vi 500 pixel được đưa ra.

Answer 3

Thêm dòng sau vào stylesheet của bạn:

table { white-space: nowrap; }

Answer 4

<table border="1" style="width:200px"> 
 
<tr> 
 
    <td>Column 1</td><td>Column 2</td> 
 
</tr> 
 
<tr> 
 
    <td nowrap="nowrap"> 
 
    
 
\t \t Single line cell just do it</td> 
 
    <td> 
 
\t 
 
\t \t multiple lines here just do it</div></td> 
 
</tr> 
 
</table>

đơn giản và hữu ích. sử dụng mã trên cho