Tôi có một yêu cầu thiết kế web để có một tiêu đề như thế này:Cách tạo "tràn văn bản: dấu ba chấm" cho cả hai "float: left" và "float: right" div?
+-------------------------------------------------------------+
| +---------------------+ +-------++------------------------+|
| | float left DIV A | | DIV C || float right DIV B ||
| +---------------------+ +-------++------------------------+|
+-------------------------------------------------------------+
Tiêu đề có 3 phần: Div A, B, C. Các DIV A là float sang trái, trong khi DIV B và C là phao sang phải. DIV A và DIV B có thể chứa văn bản dài. Vì vậy, văn bản tràn-ed được cắt ngắn như dấu ba chấm. DIV C có văn bản ngắn, nội dung của nó không được cắt ngắn.
tôi đã cố gắng để làm cho HTML như dưới đây:
<html>
<head>
<style>
.header
{
width: 100%;
border: 2px red;
overflow: hidden;
}
.DivA
{
float: left;
}
.DivC
{
float: right;
white-space:nowrap;
}
.DivB
{
float: right;
}
.clear
{
clear: both;
}
.DivA, .DivB
{
width: 40%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="header">
<div class="DivA">
Hello world 1 Hello world 2 Hello world 3
Hello world 1 Hello world 2 Hello world 3
Hello world 1 Hello world 2 Hello world 3
</div>
<div class="DivB">
Good bye Good bye
Good bye Good bye
Good bye Good bye
</div>
<div class="DivC">
No Ellipsis
</div>
<div class="clear">
</div>
</div>
</body>
</html>
Các text-overflow: ellipsis chỉ hoạt động nếu DIV A và DIV B có chiều rộng (trong trường hợp của tôi, tôi đặt chúng vào được 45%).
Tuy nhiên, có một vấn đề về DIV C. Vì chiều rộng của DIV C có thể khác nhau về bản địa hóa khác nhau, chúng tôi không thể đặt chiều rộng của nó một cách rõ ràng. Khi thu hẹp cửa sổ trình duyệt, div C có thể được bao bọc thành dòng tiếp theo. Điều này có vẻ xấu.
Có cách nào để biến DIV A và DIV B sang trái và phải tương ứng với dấu chấm lửng tràn, đồng thời DIV C có thể thích ứng với chiều rộng tốt nhất của nó?
Bằng cách này, các "trung tâm" được đẩy xuống tiếp theo nếu cửa sổ trình duyệt bị thu hẹp. –
Thật vậy, điều đó rất đúng để sử dụng chiều rộng tối thiểu trên thùng chứa hoặc .DivC sẽ được khuyến nghị. Khi bao giờ bạn sử dụng phao, bạn sẽ luôn có thể thay đổi kích thước trình duyệt đến một điểm mà nó sẽ phá vỡ bố cục, trừ khi bạn sử dụng độ rộng cố định tại một số điểm. – Phunky