CSS tràn văn bản trong một ô của bảng?

Tôi muốn sử dụng CSS text-overflowtrong một ô của bảng, sao cho nếu văn bản quá dài để vừa trên một dòng, nó sẽ cắt bằng dấu chấm lửng thay vì gói thành nhiều dòng. Điều này có thể không?

Tôi đã thử điều này:

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

Nhưng white-space: nowrapdường như làm cho văn bản (và ô của nó) liên tục mở rộng ra bên phải, đẩy tổng chiều rộng của bảng vượt quá chiều rộng của thùng chứa. Tuy nhiên, không có nó, văn bản tiếp tục bao bọc thành nhiều dòng khi nó chạm vào cạnh của ô.

Để cắt văn bản bằng dấu chấm lửng khi nó tràn vào một ô của bảng, bạn sẽ cần đặt thuộc tính max-widthCSS trên mỗi tdlớp để tràn hoạt động. Không cần bố trí thêm div

td {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Đối với bố trí đáp ứng; sử dụng thuộc tính max-widthCSS để chỉ định chiều rộng tối thiểu hiệu quả của cột hoặc chỉ sử dụng max-width: 0;để linh hoạt không giới hạn. Ngoài ra, bảng chứa sẽ cần một chiều rộng cụ thể, thông thường width: 100%;và các cột thường sẽ có chiều rộng được đặt thành tỷ lệ phần trăm của tổng chiều rộng

table {
    width: 100%;
}
td {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
td.columnA {
    width: 30%;
}
td.columnB {
    width: 70%;
}

Lịch sử: Đối với IE 9 (hoặc ít hơn), bạn cần có điều này trong HTML của mình, để khắc phục sự cố kết xuất dành riêng cho IE

<!--[if IE]>
<style>
    table {
        table-layout: fixed;
        width: 100px;
    }
</style>
<![endif]-->

Chỉ max-widthđịnh chiều rộng cố định hoặc không hoạt động trong mọi tình huống và bảng phải là chất lỏng và tự động lưu trữ các ô của nó. Đó là những gì bảng dành cho.

Sử dụng cái này: http://jsfiddle.net/maruxa1j/

HTML:

<td class="ellipsis">
    <span>This Text Overflows and is too large for its cell.</span>
</td>

CSS:

.ellipsis {
    position: relative;
}
.ellipsis:before {
    content: ' ';
    visibility: hidden;
}
.ellipsis span {
    position: absolute;
    left: 0;
    right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Hoạt động trên IE9 và các trình duyệt khác.

Tại sao điều này xảy ra?

Có vẻ như phần này trên w3.org cho thấy rằng tràn văn bản chỉ áp dụng cho các phần tử khối :

11.1.  Overflow Ellipsis: the ‘text-overflow’ property

text-overflow      clip | ellipsis | <string>  
Initial:           clip   
APPLIES TO:        BLOCK CONTAINERS               <<<<
Inherited:         no  
Percentages:       N/A  
Media:             visual  
Computed value:    as specified  

Các MDN nói cùng .

Đây jsfiddle có mã của bạn (với một vài sửa đổi debug), trong đó hoạt động tốt nếu nó được áp dụng cho một divthay vì một td. Nó cũng có cách giải quyết duy nhất mà tôi có thể nhanh chóng nghĩ ra, bằng cách gói nội dung của khối tdtrong một divkhối chứa . Tuy nhiên, điều đó có vẻ như đánh dấu "xấu xí" đối với tôi, vì vậy tôi hy vọng người khác có giải pháp tốt hơn. Mã để kiểm tra này trông như thế này:

td, div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid red;
  width: 80px;
}

Works, but no tables anymore:
<div>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</div>

Works, but non-semantic markup required:
<table><tr><td><div>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</div></td></tr></table>

Trong trường hợp bạn không muốn đặt chiều rộng cố định cho bất cứ điều gì

Giải pháp bên dưới cho phép bạn có nội dung ô bảng dài, nhưng không được ảnh hưởng đến chiều rộng của bảng cha, cũng như chiều cao của hàng cha. Ví dụ: nơi bạn muốn có một bảng với width:100%tính năng tự động kích thước cho tất cả các ô khác. Hữu ích trong lưới dữ liệu với cột "Ghi chú" hoặc "Nhận xét" hoặc một cái gì đó.

Thêm 3 quy tắc này vào CSS của bạn:

.text-overflow-dynamic-container {
    position: relative;
    max-width: 100%;
    padding: 0 !important;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    vertical-align: text-bottom !important;
}
.text-overflow-dynamic-ellipsis {
    position: absolute;
    white-space: nowrap;
    overflow-y: visible;
    overflow-x: hidden;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    max-width: 100%;
    min-width: 0;
    width:100%;
    top: 0;
    left: 0;
}
.text-overflow-dynamic-container:after,
.text-overflow-dynamic-ellipsis:after {
    content: '-';
    display: inline;
    visibility: hidden;
    width: 0;
}

Định dạng HTML như thế này trong bất kỳ ô bảng nào bạn muốn tràn văn bản động:

<td>
  <span class="text-overflow-dynamic-container">
    <span class="text-overflow-dynamic-ellipsis" title="...your text again for usability...">
      //...your long text here...
    </span>
  </span>
</td>

Ngoài ra, áp dụng mong muốn min-width(hoặc không có gì cả) cho ô bảng.

Tất nhiên là câu đố: https://jsfiddle.net/9wycg99v/23/

Có vẻ như nếu bạn chỉ định table-layout: fixed;trên thành tablephần, thì kiểu của bạn tdsẽ có hiệu lực. Điều này cũng sẽ ảnh hưởng đến cách các tế bào có kích thước, mặc dù.

Sitepoint thảo luận về các phương pháp bố trí bảng một chút ở đây: http://reference.sitepoint.com/css/tableformatted

Nếu bạn chỉ muốn bảng tự động bố trí

Không sử dụng max-width, hoặc phần trăm chiều rộng cột, hoặctable-layout: fixed vv

https://jsfiddle.net/tturadqq/

Làm thế nào nó hoạt động:

Bước 1: Chỉ cần để bảng tự động bố trí làm việc của nó.

Khi có một hoặc nhiều cột có nhiều văn bản, nó sẽ thu nhỏ các cột khác càng nhiều càng tốt, sau đó bọc văn bản của các cột dài:

Bước 2: Bọc nội dung ô trong một div, sau đó đặt div đó thành max-height: 1.1em

(0,1em thêm dành cho các ký tự hiển thị một chút bên dưới cơ sở văn bản, như đuôi của 'g' và 'y')

Bước 3: Đặt titletrên div

Điều này tốt cho khả năng tiếp cận và cần thiết cho mẹo nhỏ mà chúng tôi sẽ sử dụng ngay lập tức.

Bước 4: Thêm CSS ::aftertrên div

Đây là một chút khó khăn. Chúng tôi thiết lập CSS ::after, vớicontent: attr(title) , sau đó đặt vị trí đó lên trên div và đặt text-overflow: ellipsis. Tôi đã tô màu đỏ ở đây để làm cho nó rõ ràng.

(Lưu ý cách cột dài bây giờ có dấu chấm lửng)

Bước 5: Đặt màu của văn bản div thành transparent

Và chúng ta đã hoàn thành!

Khi nó ở độ rộng bảng phần trăm hoặc bạn không thể đặt chiều rộng cố định trên ô của bảng. Bạn có thể áp dụng table-layout: fixed;để làm cho nó hoạt động.

table {
  table-layout: fixed;
  width: 100%;
}
td {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid red;
}

<table>
  <tr>
    <td>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</td>
    <td>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</td>
  </tr>
</table>

Bọc nội dung tế bào trong một khối flex. Như một phần thưởng, ô tự động phù hợp với chiều rộng có thể nhìn thấy.

table {
  width: 100%;
}

div.parent {
  display: flex;
}

div.child {
  flex: 1;
  width: 1px;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

<table>
  <tr>
    <td>
      <div class="parent">
        <div class="child">
          xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        </div>
      <div>
    </td>
  </tr>
</table>

Tôi đã giải quyết điều này bằng cách sử dụng một div vị trí tuyệt đối bên trong ô (tương đối).

td {
    position: relative;
}
td > div {
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;        
}

Đó là nó. Sau đó, bạn có thể thêm giá trị top: vào div hoặc căn giữa theo chiều dọc:

td > div {      
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: 1.5em; // = line height 
}

Để có được một số không gian ở phía bên phải, bạn có thể giảm chiều rộng tối đa một chút.

Điều này hoạt động trong trường hợp của tôi, trong cả Firefox và Chrome:

td {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

Đây là phiên bản hoạt động trong IE 9.

http://jsfiddle.net/s27gf2n8/

<div style="display:table; table-layout: fixed; width:100%; " >
        <div style="display:table-row;">
            <div style="display:table-cell;">
                <table style="width: 100%; table-layout: fixed;">
                    <div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">First row. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
                </table>
            </div>
            <div style="display:table-cell;">
                Top right Cell.
            </div>
        </div>
        <div style="display:table-row;">
            <div style="display:table-cell;">
                <table style="width: 100%; table-layout: fixed;">
                    <div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Second row - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
                </table>
            </div>
            <div style="display:table-cell;">
                Bottom right cell.
            </div>
        </div>
    </div>