SPAN bên trong DIV ngăn chặn tràn văn bản: dấu chấm lửng

Câu hỏi này không có nghĩa là thảm khốc, nhưng đó là vấn đề tôi gặp phải và tự hỏi làm thế nào một số chuyên gia SO giải quyết nó - nếu có giải pháp.SPAN bên trong DIV ngăn chặn tràn văn bản: dấu chấm lửng

Tôi có tiện ích con giao diện người dùng có chiều rộng cố định hiển thị thông tin tệp. Tôi đang cung cấp khả năng chỉnh sửa tên tệp bằng cách nhấp vào tên tệp đó và cho biết rằng chức năng của tôi có kiểu dáng :hover được áp dụng để thay đổi màu phông chữ. Ban đầu tôi đặt tên tệp trong một DIV, nhưng vì tên tệp khác nhau có độ dài khác nhau nên tôi không thể kích thước DIV vào tên tệp và giữ hiệu ứng :hover chặt chẽ với văn bản. Với tên tập tin ngắn, hiệu ứng :hover vẫn hiển thị khi con trỏ nằm trên phần trống của DIV. Đây không phải là những gì tôi muốn như một giải pháp tôi đặt tên tệp trong một SPAN (cùng với hiệu ứng :hover). Điều đó giải quyết vấn đề cho tên tập tin ngắn nhưng ngăn chặn các tên tập tin dài tràn đầy duyên dáng với một hình elip.

Lý tưởng nhất là tôi muốn một giải pháp đạt được cả hai hiệu ứng - tên tệp dài elip và áp dụng hiệu ứng :hover chỉ khi di chuột qua văn bản thực tế. Tôi vẫn còn khá mới để css vì vậy có lẽ tôi chỉ thiếu một câu trả lời rõ ràng. Cảm ơn!

Dưới đây là một trang ví dụ cho thấy các vấn đề:
(và trên jsfiddle)

Edit: I figured tôi có thể thực hiện một số phép thuật javascript clip tên dài hơn, nhưng đã hy vọng cho một giải pháp css đơn giản hơn.

<html> 
<head> 
<style> 
    div { 
     margin:10px; 
     width:200px; 
     max-width:200px; 
     font-size:1.2em; 
     overflow:hidden; 
     text-overflow:ellipsis; 
    } 
    div.a:hover, span:hover { 
     color:666; 
     cursor:pointer; 
    } 
    span { 
     display:inline-block; 
    } 
</style> 
</head> 
<body> 

    <!-- This works well for long filenames --> 
    <div class="a"> 
     ThisIsMyReallyReallyLongFilename.txt 
    </div> 

    <!-- ... but fails for the short names --> 
    <div class="a"> 
     Shortname.txt 
    </div> 

    <!-- This fails to show ellipse for long filenames --> 
    <div> 
     <span>ThisIsMyReallyReallyLongFilename.txt</span> 
    </div> 

    <!-- ... but wraps the text nicely for short names --> 
    <div> 
     <span>Shortname.txt</span> 
    </div> 

</body> 
</html>

Nguồn

2012-04-18 randall

Như thế này? (Lưu ý việc loại bỏ các display:inline-block; từ span.)

<html> 
<head> 
<style> 
div { 
    margin:10px; 
    width:200px; 
    max-width:200px; 
    overflow: hidden; 
    text-overflow:ellipsis; 
    font-size: 1.2em; 
} 
span:hover { 
    color:666; 
    cursor:pointer; 
} 
</style> 
</head> 
<body> 

<!-- This now does show ellipse for long filenames --> 
<div> 
    <span>ThisIsMyReallyReallyLongFilename.txt</span> 
</div> 

<!-- ... but wraps the text nicely for short names --> 
<div> 
    <span>Shortname.txt</span> 
</div> 

</body> 
</html>

Nguồn

2012-04-18 21:13:42 Scriptor

ARGH! Tôi biết tôi đã bỏ lỡ một cái gì đó câm. Tôi thậm chí không cần thuộc tính 'display: inline-block', nó là một phần thừa từ một thiết kế khác mà tôi chưa từng xóa. (* lắc đầu xấu hổ *) Cảm ơn bạn đã chỉ ra! :-) Và nhờ tất cả mọi người khác cho đề xuất của họ. – randall

Bạn được chào đón nhiều nhất :) – Scriptor

Whew! Điều này đã cứu ngày của tôi! –

Vấn đề thực sự xuất phát từ việc có một SPAN với display:inline-block. Bạn sẽ cần xóa hoặc cập nhật nó thành something along the lines of this jsFiddle. Tôi không rõ chính xác những gì cần được thay đổi dựa trên ví dụ mà bạn có.

Tôi tin rằng điều này xảy ra vì SPAN sẽ không bao giờ tràn phụ huynh DIV. At least that's how the W3 spec states this gets triggered.

Nguồn

2012-04-18 21:08:12 scottheckel

Di chuyển overflow và text-overflow tính từ sự cai trị div đến một quy tắc mới mà mục tiêu cả div và span. Thêm chiều rộng tối đa.

<html> 
<head> 
<style> 
    div, span { 
     overflow:hidden; 
     text-overflow:ellipsis; 
     max-width:200px; 
    } 
    div { 
     margin:10px; 
     width:200px; 
     font-size:1.2em; 
    } 
    div.a:hover, span:hover { 
     color:#666; 
     cursor:pointer; 
    } 
    span { 
     display:inline-block; 
    } 
</style> 
</head> 
<body> 

    <!-- This works well for long filenames --> 
    <div class="a"> 
     ThisIsMyReallyReallyLongFilename.txt 
    </div> 

    <!-- ... but fails for the short names --> 
    <div class="a"> 
     Shortname.txt 
    </div> 

    <!-- This fails to show ellipse for long filenames --> 
    <div> 
     <span>ThisIsMyReallyReallyLongFilename.txt</span> 
    </div> 

    <!-- ... but wraps the text nicely for short names --> 
    <div> 
     <span>Shortname.txt</span> 
    </div> 

</body> 
</html>

Nguồn

2012-04-18 21:12:10 brentonstrine

liên kết Hexxagonal là jsFiddle về cơ bản là cùng một giải pháp là của tôi, ông chỉ đưa ra khoảng một chiều rộng 100% thay vì chiều rộng tối đa. Mặc dù cùng một khái niệm, span cần một chiều rộng nếu nó sẽ là 'inline-block'. – brentonstrine

SPAN bên trong DIV ngăn chặn tràn văn bản: dấu chấm lửng

Trả lời

Các vấn đề liên quan