Dấu trang văn bản BootStrap Bảng không thể với web đáp ứng?

Question

Tôi đang cố gắng triển khai String ellipsis trong thẻ Table.

Mã nguồn bên dưới.

<div> 
    <div class="widget-body no-padding" style="min-height:0px;"> 
    <table class="table" style="table-layout: fixed;"> 
     <tbody> 
     <c:forEach var="item" items="${result.stuffList}" varStatus="idx"> 
      <c:if test="${idx.index < 5}"> 
      <tr> 
       <td class='text-center' style="width: 80%; text-overflow:ellipsis; -o-text-overow: ellipsis; word-wrap:normal; overflow: hidden;"> 
       <nobr> 
        <a href="#" onclick="javascript:location.href='/view?nid=${item.id}'">${item.name}</a> 
       </nobr> 
       </td> 
       <td class='text-center' style="width: 20%;"> 
       ${item.regDate} 
       </td> 
      </tr> 
      </c:if> 
     </c:forEach> 
     </tbody> 
    </table> 
    </div> 
</div> 

Mã này hoạt động và nếu chuỗi quá dài hiển thị ... những gì tôi mong đợi.

Tuy nhiên, khi tôi kiểm tra phản hồi, nó trở nên xấu xí.

Tôi đã viết phần sau để thể hiện ngày đăng ký mặt hàng.

Nhưng khi trình duyệt co lại, phần sau không hiển thị trên màn hình.

<td class='text-center' style="width: 20%;"> 
    ${item.regDate} 
</td> 

Tôi có thể sử dụng dấu ba chấm trong Bootstrap trong tất cả trình duyệt bằng cách nào?

---

Vì vậy, dường như cách này

gì tôi mong đợi (khi trình duyệt co) >>

cột 1/cột 2

AAAA ..../2014-09- 24

Bây giờ trông giống như >>

cột 1/cột 2

AAAA ..../2014-09

Vấn đề là >>

Trước khi tôi thêm chức năng lược Chuỗi nó hoạt động đáp ứng.

Đoán của tôi >>

Có thể là kiểu. nhưng không biết cách triển khai chức năng String ellipsis mà không cần table-layout.

Tôi hy vọng nó trở nên rõ ràng hơn tôi hỏi đầu tiên: D

---

tôi đã có nguyên nhân

Vấn đề là width: 80%, width: 20%, table-layout:fixed.

Vì vậy, khi tôi thay đổi kích thước trình duyệt, phải mất các tùy chọn này cho nó.

Nhưng tôi vẫn không biết cách thay thế.

Tất cả những điều này đều nằm trong div là một phần nhỏ của trang web và tôi muốn trang web đáp ứng.

---

Đã chỉnh sửa sau khi chọn câu trả lời.

Cảm ơn bạn đã trả lời câu hỏi của mình!

Tuy nhiên tôi đã tìm ra nguyên nhân, nhưng không thể khắc phục điều này.

Câu trả lời đã chọn không liên quan, tuy nhiên nó rất hữu ích.

Vấn đề của tôi không phải do bootstrap, mà là chiều rộng.

Mặc dù sử dụng thư viện web đáp ứng,

không thể được đáp ứng nếu bạn sử dụng chiều rộng với % hoặc px tài sản.

Answer 1

bạn phải áp dụng tất cả kiểu này cho phần tử dấu ba chấm.

{ 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

Answer 2

20% là đề xuất, bố cục bảng sẽ bỏ qua nó. Đặt một div có chiều rộng thích hợp (hoặc chiều rộng tối đa) bên trong ô bảng và đặt văn bản vào trong div đó.

Answer 3

Nhờ this post, tìm thấy giải pháp làm việc một nửa mà không cần một bảng cố định, vì vậy rất nhiều phản hồi. Tôi đã thử nghiệm nó trên FF 43, Opera 34 và Chrome 47):

.ellipis { 
    overflow: hidden; 
    -ms-text-overflow: ellipsis; 
    -o-text-overflow: ellipsis; 
    text-overflow: ellipsis; 
    display: block; 
    white-space: nowrap; 
} 

Tuy nhiên, nếu một số dữ liệu đã có mặt trong tế bào, nó sẽ nhảy đến dòng tiếp theo ...

Answer 4

Nếu bạn là sử dụng bootstrap bạn có thể sử dụng lớp text-nowrap chỉ với hai thuộc tính phong cách style="overflow: hidden;text-overflow: ellipsis;"

Full dụ:

<h3 class="text-nowrap" style="overflow: hidden;text-overflow: ellipsis;">