Đây là một mất vào nó và bạn không cần phải sống mà không có dấu chấm lửng!
<html>
<head>
<style>
div.sidebox {
width: 25%;
}
div.sidebox div.qrytxt {
height: 1em;
line-height: 1em;
overflow: hidden;
}
div.sidebox div.qrytxt span.ellipsis {
float: right;
}
</style>
</head>
<body>
<div class="sidebox">
<div class="qrytxt">
<span class="ellipsis">…</span>
Some long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
</div>
<div class="qrytxt">
<span class="ellipsis">…</span>
Some more long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
</div>
<div class="qrytxt">
<span class="ellipsis">…</span>
Short text. Fail!
</div>
</body>
</html>
Có một lỗ hổng với điều này, nếu văn bản đủ ngắn để được hiển thị đầy đủ, các dấu ba chấm vẫn sẽ được hiển thị.
[EDIT: 6/26/2009]
Theo đề xuất của Power-Coder, tôi đã sửa đổi điều này một chút. Thực sự chỉ có hai thay đổi, việc bổ sung doctype (xem ghi chú bên dưới) và bổ sung thuộc tính display: inline-block trên số .qrytxt DIV. Đây là những gì nó trông giống như bây giờ ...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
div.sidebox
{
width: 25%;
}
div.sidebox div.qrytxt
{
height: 1em;
line-height: 1em;
overflow: hidden;
display: inline-block;
}
div.sidebox div.qrytxt span.ellipsis
{
float: right;
}
</style>
</head>
<body>
<div class="sidebox">
<div class="qrytxt">
<span class="ellipsis">…</span>
Some long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
</div>
<div class="qrytxt">
<span class="ellipsis">…</span>
Some more long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
</div>
<div class="qrytxt">
<span class="ellipsis">…</span>
Short text. FTW
</div>
</div>
</body>
</html>
Ghi chú:
xem trong IE 8.0, Opera 9, FF 3
Một doctype là cần thiết cho IE để có được display: inline-block để hoạt động chính xác.
Nếu tràn của DIV xảy ra trên một từ dài, sẽ có khoảng cách rộng giữa dấu ba chấm và từ hiển thị cuối cùng. Bạn có thể thấy điều này bằng cách xem ví dụ và thay đổi kích thước chiều rộng trình duyệt của bạn theo từng bước nhỏ. (điều này có thể đã tồn tại trong ví dụ ban đầu, tôi chỉ có thể không nhận thấy nó sau đó)
Vì vậy, một giải pháp CSS không hoàn hảo. Javascript có thể là điều duy nhất có thể có được hiệu ứng hoàn hảo.
[EDIT: 6/27/2009]
Đây là một giải pháp thay thế khác sử dụng tiện ích mở rộng cụ thể của trình duyệt.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
div.sidebox
{
width: 26%;
}
div.sidebox div.qrytxt
{
height: 1em;
line-height: 1em;
overflow: hidden;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
-ms-text-overflow:ellipsis;
-moz-binding:url(ellipsis-xbl.xml#ellipsis);
white-space:nowrap;
}
</style>
</head>
<body>
<div class="sidebox">
<div class="qrytxt">
Some long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
</div>
<div class="qrytxt">
Some more long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
</div>
<div class="qrytxt">
Short text. FTW
</div>
</div>
</body>
</html>
Lưu ý rằng để cho ví dụ trên để làm việc, bạn phải tạo file xml tham chiếu bởi sự cai trị moz-ràng buộc, ellipsis-xbl.xml. Đó là nên chứa xml sau:
<?xml version="1.0" encoding="UTF-8"?>
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<binding id="ellipsis">
<content>
<xul:window>
<xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
</xul:window>
</content>
</binding>
</bindings>
Nguồn
2008-08-29 03:43:14
Tôi thích câu trả lời này, chúng ta nên xem xét cập nhật nó với giải pháp cho vấn đề văn bản ngắn. Tôi sẽ xem những gì tôi có thể làm. –
Tôi đã thêm một giải pháp thay thế. Tuy nhiên, không hoàn hảo: ( –
Đây là hai suy nghĩ bổ sung. Đầu tiên, sử dụng & hellip; cho dấu chấm lửng, "..." không giống như "...". Thứ hai, tại sao tất cả các nhịp nổi để bắt đầu? Bạn có thể để trình duyệt thêm dấu chấm lửng vào div hoàn toàn tự động khi cần thiết (bằng cách chỉ định tràn văn bản: dấu chấm lửng cho IE, -o-text-overflow: dấu ba chấm cho Opera và sử dụng giải pháp moz-binding cho FF) –