2009-08-05 19 views
5

trong gmail, họ hiển thịlàm thế nào để cắt văn bản trong css như gmail không để email danh sách chủ đề

chủ đề - theo sau là một đoạn ngắn ra khỏi cơ thể

và có vẻ như phần nội dung được cắt bớt, tôi đang giả định này được thực hiện với css, style sheets gmail là khá phức tạp, vì vậy tôi không chắc chắn

nào chỉ bộ phận của chữ đang hiển thị ở phần cuối của đường, nơi họ nhận được cắt nhỏ ra

không ai biết làm thế nào tôi có thể đạt được hiệu quả tương tự, vì vậy tôi nhận được đầy đủ độ dài văn bản trong một cột


nhận nó sussed nhờ @cletus

chỉ cần làm rõ, đây là những gì tôi đã kết thúc với

<div style="overflow: hidden; height: 20px;">mytitle<span style="color: gray; "> - my long description goes here</span></div> 

Trả lời

3

Đó là overflow: hidden CSS trên các yếu tố khối. Phần phần tử cấp khối là quan trọng. Xem The CSS Overflow Property.

+0

vì vậy tôi chỉ cung cấp một dòng này thay vì cắt, tôi đang làm đúng không? – bumperbox

+0

Nếu bạn muốn được trợ giúp về một ví dụ, tôi khuyên bạn nên đăng bài ở đây hoặc đăng nó dưới dạng câu hỏi mới. Nhận xét không phải là cách tuyệt vời để làm điều đó. Liên kết tôi đăng có rất nhiều ví dụ, vì vậy tôi khuyên bạn nên xem xét các ví dụ đó, đặc biệt là trang demo http://css-tricks.com/examples/OverflowExample/ – cletus

+0

Điều này chỉ hoạt động nếu div của bạn có chiều rộng cố định. Gmail không cố định. Tất cả các cột đều có độ rộng cố định ngoại trừ cột Chủ đề tự động. Điều này không hoạt động khi bảng của bạn là 100% như gmail và khi chỉ có một cột được đặt thành tự động trong khi các cột khác được cố định. Bất cứ ai biết gmail làm như thế nào? – EdenMachine

0

Điều này sẽ không hoạt động trong IE6-7. Thay vào đó, hãy sử dụng thuộc tính css văn bản tràn. Thông tin thêm về nó: http://www.blakems.com/archives/000077.html (điều này sẽ không xác thực! Thông báo xác thực, rằng đó là thuộc tính css3 không tồn tại trong css2.1 ...)

8

Để có được hiệu ứng cắt văn bản đầy đủ, chỉ có các phần của các chữ cái hiển thị ở cuối phần tử, chỉ cần thêm:

white-space: nowrap; 
Các vấn đề liên quan