Xóa văn bản tràn trong ô bảng, vì vậy bảng không mở rộng hơn màn hình

Question

Tôi đang cố hiển thị các mục khác nhau theo định dạng bảng (mỗi mục có các thuộc tính khác nhau). Sau đây cũng được yêu cầu:

1. Cột nên năng động để nội dung chặt chẽ phù hợp, độ rộng không cố định (xử lý bởi bố trí bảng)
2. Hàng sẽ có thể nhấp để kích hoạt một hành động trên entry của hàng đó, ví dụ hiển thị trang mới với phiên bản mở rộng của nội dung đó (được xử lý bằng cách sử dụng CSS display: table/table-row/table-cell thay vì <table>/<tr>/<td> - theo mã ví dụ). (Một lý do khác cho tôi là tôi sử dụng JSF, tạo ra HTML, nhưng loại lá tôi bị mắc kẹt với việc sử dụng này.)
3. Tôi không thể có được quyền này: Bảng không được phát triển bên ngoài chiều rộng màn hình khả thi. Cụ thể, cột "tóm tắt" hiển thị văn bản (có thể dài), được cắt ngắn khi cần thiết, vì vậy văn bản vừa với ô, phù hợp với chiều rộng của bảng, có thể không rộng hơn chiều rộng màn hình.
   • Tôi sử dụng CSS text-overflow: ellipsis trên bản tóm tắt này cùng với các cài đặt cần thiết khác. Vì xung quanh <div> đã có display: table-cell, trong khi thuộc tính ellipsisneeds an inline/block element, văn bản "tóm tắt" được gói trong một <div> khác.

Dưới đây là một ví dụ về mong muốn hiệu lực thi hành (lưu ý KHÔNG thanh cuộn ở phía dưới):

Mặc dù đây là những gì tôi hiện có thể đạt được (KHÔNG lý tưởng) (lưu ý thanh cuộn ở dưới cùng - biểu thị bảng chạy ở ngoài cửa sổ bên phải):

Đây là mã vạch để đạt được điều này (người ta có thể bỏ qua tất cả các thuộc tính được đánh dấu bằng /*l&f*/ (giao diện), chúng chỉ nhằm tạo ra một ví dụ gỡ lỗi, dễ tìm kiếm hơn).

CSS và HTML:

A { 
 
    /*l&f*/text-decoration: inherit; 
 
    /*l&f*/color: inherit; 
 
} 
 
.list-table { 
 
    display: table; 
 
    /*l&f*/border: 1px solid blue; 
 
    /*l&f*/border-spacing: 5px; 
 
} 
 
.list-tr { 
 
    display: table-row; 
 
    /*l&f*/background-color: lightgray; 
 
} 
 
.list-td { 
 
    display: table-cell; 
 
    white-space: nowrap; /* one line */ 
 
    /*l&f*/padding: 2px; border : 1px solid green; 
 
    /*l&f*/border: 1px solid red; 
 
} 
 
.summary { 
 
    display: block; 
 
    white-space: nowrap; /* one line */ 
 
    overflow: hidden; /* make text overflow */ 
 
    text-overflow: ellipsis; /* truncate tex with ... */ 
 
    /*l&f*/background-color: lightblue; 
 
}

<div class="list-table"> 
 
    <a href="#1" class="list-tr"> 
 
    <div class="list-td">Row 1</div> 
 
    <div class="list-td">More stuff</div> 
 
    <div class="list-td"> 
 
     <div class="summary">Some single line run on text goes here</div> 
 
    </div> 
 
    </a> 
 

 
    <a href="#2" class="list-tr"> 
 
    <div class="list-td">Row 2</div> 
 
    <div class="list-td">Other column</div> 
 
    <div class="list-td"> 
 
     <div class="summary">This is text content that runs on and on 
 
     and on without end and may need to be truncated somewhere on the 
 
     summary screen depending on screen size to show only the first part 
 
     that will fit.</div> 
 
    </div> 
 
    </a> 
 

 
    <a href="#3" class="list-tr"> 
 
    <div class="list-td">Row 3</div> 
 
    <div class="list-td">Still other content</div> 
 
    <div class="list-td"> 
 
     <div class="summary">Here is still more long text that may 
 
     need truncation in the summary version because it is so long.</div> 
 
    </div> 
 
    </a> 
 
</div>

tôi đã có thể để đạt được kết quả mong muốn với display: -moz-box (và khác nhau -moz- thiết lập khác), trong summary phong cách. Không hài lòng vì đây không phải là đa nền tảng.

Bạn có đề xuất nào tốt hơn không? Trợ giúp của bạn được đánh giá cao :-)

Answer 1

Nếu bạn có thể thực hiện thay đổi đối với HTML đã xuất thì bạn có thể có giải pháp khả thi.

tôi đã thực hiện một vài thay đổi sang HTML của bạn (thêm một div cha mẹ để .summary, để tạo ra một bảng cố định bằng cách sử dụng table-layout:fixed)

Xem ĐOẠN dưới đây:

A { 
 
    /*l&f*/ 
 
    text-decoration: inherit; 
 
    /*l&f*/ 
 
    color: inherit; 
 
} 
 
.list-table { 
 
    display: table; 
 
    /*l&f*/ 
 
    border: 1px solid blue; 
 
    /*l&f*/ 
 
    border-spacing: 5px; 
 
    width: 100%; /* ADDED */ 
 
} 
 
/* CREATED */ 
 
.fixed-table { 
 
    width:100%; 
 
    table-layout: fixed; 
 
    display:table 
 
} 
 

 
.list-tr { 
 
    display: table-row; 
 
    /*l&f*/ 
 
    background-color: lightgray; 
 
} 
 
.list-td { 
 
    display: table-cell; /* CHANGED */ 
 
    white-space: nowrap; 
 
    /* one line */ 
 
    /*l&f*/ 
 
    padding: 2px; 
 
    border: 1px solid green; 
 
    /*l&f*/ 
 
    border: 1px solid red; 
 
} 
 
.summary { 
 
    display: table-cell; 
 
    /*l&f*/ 
 
    background-color: lightblue; 
 
    white-space: nowrap; 
 
    /* one line */ 
 
    overflow: hidden; 
 
    /* make text overflow */ 
 
    text-overflow: ellipsis; 
 
    /* truncate texT with ... */ 
 
}

<div class="list-table"> 
 
    <a href="#1" class="list-tr"> 
 
    <div class="list-td">Row 1</div> 
 
    <div class="list-td">More stuff</div> 
 
    <div class="list-td"> 
 
     <div class="fixed-table"> 
 
     <div class="summary">Some single line run on text goes here</div> 
 
     </div> 
 
    </div> 
 
    </a> 
 

 
    <a href="#2" class="list-tr"> 
 
    <div class="list-td">Row 2</div> 
 
    <div class="list-td">Other column</div> 
 
    <div class="list-td"> 
 
     <div class="fixed-table"> 
 
     <div class="summary">This is text content that runs on and on and on without end and may need to be truncated somewhere on the summary screen depending on screen size to show only the first part that will fit.</div> 
 
     </div> 
 
    </div> 
 
    </a> 
 

 
    <a href="#3" class="list-tr"> 
 
    <div class="list-td">Row 3</div> 
 
    <div class="list-td">Still other content</div> 
 
    <div class="list-td"> 
 
     <div class="fixed-table"> 
 
     <div class="summary">Here is still more long text that may need truncation in the summary version because it is so long.</div> 
 
     </div> 
 
    </div> 
 
    </a> 
 
</div>

Answer 2

.list-table { 
    max-width:100vw; 
} 

Answer 3

Tất cả những gì tôi có thể làm là thêm (tùy ý) max-width vào lớp summary của bạn:

.summary { 
    display: block; 
    white-space: nowrap; /* one line */ 
    overflow: hidden; /* make text overflow */ 
    text-overflow: ellipsis; /* truncate tex with ... */ 
    /*l&f*/background-color: lightblue; 
    max-width: 500px; 
} 

Bạn sẽ cần phải cung cấp .summary một số loại phi di truyền chiều rộng để có được text-overflow để làm việc tôi nghĩ ...