2011-11-12 40 views
9

Tôi có một bảng có 3 dấu chấm '...' ở cuối mỗi dòng khi cần thiết (tràn văn bản). Tôi đã sử dụng giá trị dấu ba chấm của thuộc tính tràn văn bản. Nó hoạt động: khi cửa sổ được thay đổi kích thước, '...' được hiển thị nhưng tôi có 2 vấn đề khi dòng trong bảng của tôi chứa một khoảng:Giá trị dấu ba chấm '...' không phải là màu phù hợp

  • '...' được tô màu phông chữ của nhịp
  • các '...' được thay đổi kích cỡ kích thước của phông chữ của nhịp

Xem bản demo ở đây: http://jsfiddle.net/Ah4DR/1/

có lẽ đây là một câu hỏi mới làm quen nhưng tôi đã tìm kiếm trong một thời gian và không tìm thấy bất kỳ giải pháp nào.

Tôi quên nói rằng điều này không hoạt động trên Internet Explorer nhưng hoạt động tốt trên Chrome.

Cảm ơn!

+0

trình duyệt này là gì? Có vẻ ổn trong Chrome. – bozdoz

+0

"Hoạt động tốt trong FF8". Đảm bảo cho biết (các) trình duyệt nào bị (/) bị ảnh hưởng! –

+0

@bozdoz, pst: Xin lỗi tôi quên đề cập đến sự cố xảy ra trong Internet Explorer! – Bronzato

Trả lời

5

Chắc chắn nó có vẻ là một lỗi trong IE. Đó là (vì lý do gì) đọc màu của phần tử đầu tiên (hoặc có thể đó là nội dung đầu tiên) để xác định màu của dấu ba chấm. Tuy nhiên, tôi đã tìm thấy một "xung quanh" cho lỗi này. Tôi muốn giới thiệu nếu có thể thiết lập này trong một số cách để chỉ nhắm mục tiêu IE (và chỉ có td yếu tố mà bạn đang sử dụng text-overflow trên), nhưng như một bằng chứng của khái niệm, điều này sửa chữa nó:

td:before {content: ''; color: black;} 

Rõ ràng là người đầu tiên td nội dung xác định màu sắc không cần phải là nội dung thực, bởi vì nội dung giả đã hoạt động.

+0

Cảm ơn bạn rất nhiều, nó hoạt động như một nét duyên dáng :) – Bronzato

12

Tôi đã gặp vấn đề tương tự; trong khi văn bản của tôi có màu trắng xám đậm, màu hình elip dường như có màu đen. Tôi đã giải quyết nó bằng cách chỉ cần đặt màu của phần có chứa tràn văn bản: dấu chấm lửng, như sau:

.ellipsis-div { 
    white-space: nowrap; 
    width: 154px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    color: white;  /* --> ellipsis color */ 
} 
Các vấn đề liên quan