Kết hợp giao diện người dùng/CSS tốt nhất khi hiển thị chuỗi có độ dài không xác định là gì?

Question

Tôi có một danh sách các mục mà tôi đang hiển thị trong danh sách thả nổi, với mỗi mục trong danh sách ở độ rộng cố định sao cho có hai mục trên mỗi hàng. là những gì các thực hành tốt nhất để ngăn chặn điều khủng khiếp này xảy ra:

alt text http://x01.co.uk/floated_items.gif

possibilites:

• Trim để một số quy định của nhân vật trước khi hiển thị dữ liệu. Yêu cầu phỏng đoán về số lượng ký tự sẽ "an toàn".
• Tràn: bị ẩn. Hacky.
• Xóa nền và chỉ có đường viền trên cùng trên mỗi mục.

thể nhưng ngớ ngẩn:

• Có một thanh cuộn trong từng hạng mục bằng cách làm overflow: auto, điều này sẽ trông khủng khiếp.
• Thêm hình nền vào vùng chứa. Nó không đảm bảo rằng luôn luôn có một số lượng bằng nhau của các mục để tùy chọn này là ra ngoài.

Bất kỳ trợ giúp nào về vấn đề khó chịu này đều được đánh giá cao!

Answer 1

Bạn đang sử dụng kích thước phông chữ cố định, tức là được chỉ định trong px? Nếu không, bạn cũng cần phải xem xét các tùy chọn kích thước văn bản khác nhau của mỗi trình duyệt mà có lẽ sẽ làm cho khái niệm về cắt xén chuỗi dư thừa. Nếu nó là cố định thì có lẽ nhìn thấy có bao nhiêu W bạn có thể phù hợp và hạn chế văn bản của bạn để -3 và thêm một dấu chấm lửng, không chắc chắn danh sách này là gì vì vậy đó là một cách tiếp cận.

Cá nhân tôi có thể sử dụng tràn: ẩn như bao gồm tất cả các trường hợp và đảm bảo rằng nó sẽ luôn giữ bố cục của bạn nhất quán.

Tôi đoán tùy chọn cuối cùng sẽ là kiểm soát chặt chẽ những gì có thể được thêm vào danh sách và ngăn sự cố xảy ra ngay từ đầu. Phòng bệnh tốt hơn chữa bệnh như họ nói, mặc dù có thể không hữu ích.

Answer 2

Có các tập lệnh hỗ trợ điều này bằng cách so sánh li trong các khối của hai và làm cho chúng bằng với số cao nhất.

Thông thường, thay vì nghĩ những gì tốt nhất từ ​​quan điểm css, bạn nên xem xét bản trình bày nào bạn muốn, sau đó nhận css/JavaScript để đưa bạn đến hiệu quả mong muốn.

Nếu đây là cái gì mà bạn chỉ muốn ra khỏi đường đi, xem xét sử dụng một hình ảnh nền gradient làm nổi bật phía trên cùng của li và đề nghị khối mà không thực sự điền vào đó.

---

Thêm liên kết đến giải pháp jQuery: Equalize

Answer 3

Một giải pháp là có PNG dựa trên alpha sẽ từ từ làm mờ văn bản đến màu nền của vùng chứa của bạn, trên 10px cuối cùng hoặc lâu hơn. Điều đó sẽ tốt nếu một số văn bản ngắn gọn hơn so với các văn bản dài, tuy nhiên trong trường hợp văn bản sẽ bằng với container, nó có thể trông khá ngớ ngẩn.

Tất nhiên, kết hợp với màn hình: ẩn và white-space: không-wrap

Answer 4

Từ một điểm tiếp cận của xem nó không phải là một ý tưởng tốt để chỉ đơn giản là ẩn danh, vì đó có thể ẩn nội dung trên người tăng kích thước phông chữ do thị lực kém. Thiết kế của bạn sẽ có thể nổi khi bị ảnh hưởng bởi các độ phân giải xấu hoặc các vật cản tương tự, ngay cả khi nó nổi vào thứ gì đó ít làm hài lòng mắt hơn.

Bây giờ nếu tôi hiểu vấn đề của bạn với hình nền chính xác, tôi tin rằng sự cố của bạn có thể được giải quyết bằng các kỹ thuật mô tả trong bài viết ALA trên sliding doors, nơi hình nền mở rộng với nội dung.

Answer 5

Đây là một số tranh cãi cho bạn .. sử dụng bảng?

Có vẻ như bạn có một mạng lưới dữ liệu với tôi, liệu bảng có trả lời vấn đề này cho bạn không?

Nó cũng đặt ra câu hỏi, bạn có thực sự muốn các mục có cùng độ cao hoặc chỉ có cùng một lượng nền đen phía sau chúng không? Bạn có thể áp dụng màu đen cho nền của hàng, sau đó tạo dải phân cách giữa trắng với đường viền và lề.

Answer 6

Bạn có thể thử sử dụng:

ul li{ 
    display:block; 
    float:left; 
    width:6em; 
    height:4em; 
    background-color:black; 
    color:white; 
    margin-right:1em; 
} 
ul{ 
    height:100%; 
    overflow:hidden; 
} 
div{ 
    height:3em; 
    overflow:hidden; 
    background-color:blue; 
} 

Không biết về consistensy trình duyệt chéo mặc dù. EDIT: Đây là html tôi giả định:

<div> 
<ul> 
<li>asdf 
<li>asdf trey tyeu ereyuioquoi 
<li>fdas dasf erqwt ytwere r 
<li>dfsaklñd s jfañlsdjf ñkljdk ñlfas 
<li>ksdflñajñldsafjñlksdjfñalksdfjlkdhfc,v.mxzn 
</ul> 
</div>