Учет длины HTML DIV для усечения текста

Question

У меня есть <div>, что я заполняю имя файла неопределимого размера. Если размер превышает длину <div>, тогда я хочу, чтобы он был срублен, а последние 3 символа заменены на «...». В настоящее время у меня есть следующий:

<div id="fileName" class="field-row" title="<%= fileName %>"> 
    <% if(fileName.Length > 20) { %> 
     Filename: <%= fileName.Substring(0,20) %>... 
    <% } else { %> 
     Filename: <%= fileName %> 
    <% } %> 
</div> 

Это работает отлично, но если у меня есть имя файла, составленные из я в VS. W в том DIV будет иметь неиспользуемое пространство справа.

Например:

"iiiiiiiiii.jpg"

короче:

"WWWWWWWWWW.jpg"

... даже если они имеют одинаковое количество символов.

Есть ли лучший способ сделать это, что объясняет длину <div>?

Спасибо,

Аарон

Answer 1

Из-за различий в ширину символов, которые вы упомянули, это должно быть сделано на стороне клиента.

Это в основном кросс-браузер, в основном-способ CSS: http://www.electrictoolbox.com/ellipsis-html-css/. Это не полностью поддерживается, но это то, что запасной вариант JavaScript для. * В принципе, просто использовать

#fileName { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis; 
    white-space: nowrap; 
    width: 100%; 
} 

Без JavaScript, который получает вам поддержку для IE7-, Safari/Chrome, Opera, Konqueror.

http://www.quirksmode.org/css/textoverflow.html

Если вы чувствуете, что с помощью JavaScript только для поддержки Firefox слишком Hacky, вы можете придерживаться чистого CSS, и перетекание текста будут просто скрыты. Попробуйте просмотреть страницу quirksmode в FF, и вы увидите.

---

* Edit: после протестировали jQuery ellipsis plugin патч для FireFox, я могу подтвердить это работает довольно хорошо, и масштабирует достаточно хорошо, если не использовать «живой изменить размер» (только) вариант. Со всеми 26 элементами и живым вариантом, изменение размера взяло FireFox - на мускулистой машине - до колен. Будьте осторожны с этим вариантом! Это приятное удобство, но плагин не выглядит написанным ужасно эффективно (и у меня нет времени исправлять его прямо сейчас).