Версия для печати темы Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Разработка под ASP.NET > Автоматическое обрезание текста по ширине лэйбла

Автор: ivashkanet 9.8.2007, 11:35

Всем привет. Есть текст. Он может быть как маленький, так и большой. Но на его отображение выделено всего три строки, а с шириной этих строк вообще беда -- меняется в рантайме.  Так вот этот текст, если помещается, должен быть полностью отображен, если нет, то обрезается чтобы влез, а в конце ставяться три точки (в этом случае при наведении на три точки или на сам текст должен всплывать полный текст).  Так же ширина этого контрола зависит от: разрешения экрана, открытого окна, положения панельки (она может быть выдвинута, и задвинута, от этого зависит место, кот выделяется тексту). Вопрос: может уже есть готовый контрол такого типа? Или, может, у кого есть идеи как его слепить самостоятельно. На первое время пойдет определение длинны текста во время загрузки страницы (сейчас это всегда 45*3 символов, что не очень удобно). Зарание спасибо, ivashkanet.

Автор: tol05 9.8.2007, 13:59

Ajax, HoverMenuExtender если тебе нужен всплывающий текст, то это нужно повесить на клиента - значит, или ajax, или свои скрипты. По поводу длины текста - ИМХО, лучше самому считать String.Length для текста и от ее длины плясать - или урезать ее до известной длины и ставить "...", или не урезать и HoverMenuExtender дизейблить. Ведь кроме проблем с  Цитата(ivashkanet @  9.8.2007,  11:35 ) разрешения экрана, открытого окна, положения панельки   еще есть проблемы на самом сервере (css, themes) - так что проще будет жестко захардкодать как ширину лейбла, так и его текст.

Автор: ivashkanet 9.8.2007, 14:16

tol05, нито :( 1) Аякс тут не нужен. Ничего не стоит захардкодить весь текст в страницу, а потом брать его и показывать. 2) String.Length посчитать легко. А вот Label.ДлинаЧтоВлазит посчитать проблематично.  Цитата(tol05 @  9.8.2007,  13:59 ) так что проще будет жестко захардкодать как ширину лейбла Но будет некрасиво (это и не нравится заказчику): А если задвинуть панельку (что справа), то вообще будет куча места. Это при ширине 1280 пикселей.

Автор: tol05 9.8.2007, 14:52

мда. Тогда нужно курить javascript-ы... кто-то же должен всплывающий полный текст показывать?  смотрел поиском на здешних подфорумах. Вроде много...

Автор: ivashkanet 9.8.2007, 15:12

Цитата(tol05 @  9.8.2007,  14:52 ) кто-то же должен всплывающий полный текст показывать Так причем здесь всплывающий? Я не о нем. Если бы дело было в нем, то... это не проблема. Проблема в том, что на картинке вверху обрезало всего пять букв слова "Report", хотя места еще завались (а + 3 точки, получается всего 2 буквы обрезало). И хотелось, бы (пока) обойтись без жаваскрипта. Чтонить типа:  Код string text = "sdskfjsdjhfkjsdfklsdhfjkcjvx sdjfklxc vlxzkc sdafujs xjcvkudsk fjklxj ccxkfhdsruaposjfklsdf jewjfksljfd"; int lableSize = Label.ActualSize; int stringSize = something.MeagureSting(text, currrentFont, ...); // а далее обрезать ненужную часть не проблема

Автор: Mymik 9.8.2007, 21:10

ivashkanet, на стороне сервера нельзя узнать ширину клиентской части где будет отображаться контрол. Потому надо это делать только лишь с помощью JS. сделать твой спан блоком, задать ширину и перехватывать resize окна, считать ширину области и ширину твоего контрола, после этого считать нужную тебе длину и обрезать текст. Но все это только лишь на стороне клиента. Сервер тут ничем не поможет. С полной уверенностью не могу сказать, но не думаю, что такие контролы существуют. Слишком уникальная задача + ко всему ее можно можно и нужно решать с помощью html'я. кстати, можно делать обрезать и с помощью clip этот объект...

Автор: ivashkanet 9.8.2007, 21:24

Цитата(Mymik @  9.8.2007,  21:10 ) на стороне сервера нельзя узнать ширину клиентской части Нууу, может браузер в реквесте отправляет какие-нить данные о размере окна Но не важно, жаваскрипт так жаваскрипт  Цитата(Mymik @  9.8.2007,  21:10 ) сделать твой спан блоком, задать ширину и перехватывать resize окна, считать ширину области и ширину твоего контрола, после этого считать нужную тебе длину и обрезать текст Есть идеи? Цитата(Mymik @  9.8.2007,  21:10 ) ко всему ее можно можно и нужно решать с помощью html'я Так любой контрол в конечном виде предвращается в HTML... Цитата(Mymik @  9.8.2007,  21:10 ) кстати, можно делать обрезать и с помощью clip этот объект...  Поподробнее тут плиз.

Автор: Mymik 10.8.2007, 11:02

Цитата(ivashkanet @  9.8.2007,  21:24 ) Нууу, может браузер в реквесте отправляет какие-нить данные о размере окна прикольно, а расскажи как ??? мне никогда не нужно было такое и я думал, что такие левые данные не приходят от пользователя к серверу... ведь по сути это лишний трафик. Цитата(ivashkanet @  9.8.2007,  21:24 ) Есть идеи? Идеи есть :о) ща буду пытаться реализовать. Надо придумать как определить ширину в пикселях одной буквы. А можно что-нибудь другое придумаю... :о) вобщем ща буду мозговать. Цитата(ivashkanet @  9.8.2007,  21:24 ) Поподробнее тут плиз.  Это CSS пропортя... позволяет скрывать данные :о) Добавлено через 1 минуту и 20 секунд ivashkanet, кстати, а можешь написать шаблон того как это все выводиться ??? а то сложно предусмотреть все варианты :о) да и не хочется. Слишком много времени на это тогда потрачу.

Автор: ivashkanet 10.8.2007, 11:26

Цитата(Mymik @  10.8.2007,  11:02 ) прикольно, а расскажи как ???  Это просто предположение  Может в стандартных реквестах это поле есть  Ведь может возникнуть задача менять дизайн в зависимости от размеров окна пользователя (не все же делать резиновым как в 35-м году  ) Цитата(Mymik @  10.8.2007,  11:02 ) Надо придумать как определить ширину в пикселях одной буквы Это не проблема. Можно вручную подобрать. Шрифт меняться не будет. Цитата(Mymik @  10.8.2007,  11:02 ) ivashkanet, кстати, а можешь написать шаблон того как это все выводиться ??? Нуу, допустим, это таблица на три столбца. В центральном, например, лежит наш контрол. В стилях для него прописано занимать все доступное ему место. Таблица может менять свои размеры.

Автор: Mymik 10.8.2007, 11:53

Цитата(ivashkanet @  10.8.2007,  11:26 ) smile Это просто предположение smile Может в стандартных реквестах это поле есть smile Ну что :о) я поискал конечно же... и вот что нашел -->>  Код Request.Browser.ScreenPixelsWidth Так что левых данных тут дофига :о) Странно... надо будет полазить по коду и посмотреть как они это реализуют :о) Цитата(ivashkanet @  10.8.2007,  11:26 ) Ведь может возникнуть задача менять дизайн в зависимости от размеров окна пользователя (не все же делать резиновым как в 35-м году smile ) обычно для этого тоже используется JS :о)... во всяком случаи когда на немцев работал, то у них там был супер-пупер модный код, который это делал... деревянный до безумия, но пришлось использовать... Цитата(ivashkanet @  10.8.2007,  11:26 ) Нуу, допустим, это таблица на три столбца. В центральном, например, лежит наш контрол. В стилях для него прописано занимать все доступное ему место. Таблица может менять свои размеры.  Код <table>     <tr>         <td><img src="" alt="" title="" /></td> <!-- Рисунок с папочкой -->         <td><b>56</b><span>text text test text</span></td> <!-- тут наш центральный текст -->         <td><img src="" alt="" title="" /></td> <!-- Тут вот та закругленная картинка, да ??? -->     </tr> </table> правильно ???

Автор: ivashkanet 10.8.2007, 13:25

Цитата(Mymik @  10.8.2007,  11:53 )      Request.Browser.ScreenPixelsWidth Оооо, класс. Если эта штука ещё возвращает корректное значение, то это моя панацея (хотя бы на первый момент). Цитата(Mymik @  10.8.2007,  11:53 ) Странно... надо будет полазить по коду и посмотреть как они это реализуют :о) Это отправляет сам браузер (может только IE это и отправляет, а остальные об этом ничего не знают). Цитата(Mymik @  10.8.2007,  11:53 ) обычно для этого тоже используется JS Конечно. Но высокоуровневыми средствами проще (это мой первый реальный ASP .net проект). Цитата(Mymik @  10.8.2007,  11:53 ) правильно ??? Почти Цитата(Mymik @  10.8.2007,  11:53 ) Тут вот та закругленная картинка, да ??? Эта закруглённая картинка и есть предмет трудностей. Именно она ездит влево-вправо и меняет размер "таблицы". Её можно съэмулировать простым жаваскриптом на кнопке, который будет менять ширину таблицы. А вообще, нафик нам нужна эта таблица. Просто нужен элемент (див/не див) который будет обрезать текст в зависимости от своих размеров. Т.е. будет поле и кнопка: забил 10, нажал OK, размер элемента стал 10 и текст корректно (или близко к корректному) обрезался; забил 100, ОК, опять корректно обрезался.

Автор: Idsa 10.8.2007, 18:06

Цитата(ivashkanet @  10.8.2007,  13:25 ) Оооо, класс. Если эта штука ещё возвращает корректное значение, то это моя панацея Цитата The returned value can be derived from the assumed character size and character width. The algorithm for determining the pixel width uses a combination of the default font sizes (from a .config file), device-specific sizes (again, from a .config file), and explicit headers sent by the devices. These values are not necessarily exact (especially for variable-width fonts, these values are approximate). Some devices might rely on internal default values, which only approximate the actual width. Так что доверять этим значениям не стоит.

Автор: Zakonnic 13.8.2007, 16:40

ivashkanet, кажись, я знаю чо те надо.    Можно же в стилях прописать, чтобы текст не отображался полностью, а уезжал за горизонт и ставил троеточие в конце. Это атрибуты overflow и textOverflow Вот, нашел в мсдн: Код <HTML> <BODY> <DIV STYLE="text-decoration:underline;color:darkRed; font: bold 20px Arial;font-weight:bold"> Effect of CSS property <I>text-overflow</I></DIV>  <DIV STYLE="font: bold 16px Arial; color:darkRed; font-weight:bold"> Each box (DIV element) below contains the following text:</DIV> <DIV >We hold these truths to be self-evident,  that all people are created equal.</DIV> <DIV STYLE="font: bold 16px Arial;color:darkRed; font-weight:bold"> Note how the STYLE settings effect the rendering of the text</DIV> <DIV STYLE="position: relative; height: 75px; top:10"> <DIV STYLE="position: absolute; left: 10px;             font: bold 16px Arial, sans-serif; color: blue; "> STYLE ="text-overflow : clip; overflow : hidden" <DIV STYLE="position: absolute; left: 0px; top: 18px; color: black;             width: 120px; height: 50px; border: 1px solid blue;             font: 14px Times New Roman, serif; overflow: hidden;             text-overflow:clip"> <NOBR>We hold these truths to be self-evident,  that all people are created equal.</NOBR> </DIV> </DIV> <DIV STYLE="position: relative; height: 75px; top: 70"> <DIV STYLE="position: absolute; left: 10px;             font: bold 16px Arial, sans-serif; color: blue; "> STYLE ="text-overflow : ellipsis; overflow : hidden" <DIV STYLE="position: absolute; left: 0px; top: 18px; color: black;             width: 120px; height: 50px; border: 1px solid blue;             font: 14px Times New Roman, serif; overflow: hidden;             text-overflow:ellipsis"> <NOBR>We hold these truths to be self-evident,  that all people are created equal.</NOBR> </DIV> </DIV> <DIV STYLE="position: relative; height: 75px; top:70"> <DIV STYLE="position: absolute; left: 10px;             font: bold 16px Arial, sans-serif; color: blue; "> STYLE ="text-overflow : ellipsis; overflow : visible" <DIV STYLE="position: absolute; left: 0px; top: 18px; color: black;             width: 120px; height: 50px; border: 1px solid blue;             font: 14px Times New Roman, serif; overflow: visible;             text-overflow:ellipsis"> <NOBR>We hold these truths to be self-evident,  that all people are created equal.</NOBR> </DIV> </DIV> </BODY> </HTML>

Автор: ivashkanet 13.8.2007, 17:33

Zakonnic, "text-overflow : ellipsis; overflow : hidden" Выглядит неплохо  Попробую заюзать ;-) Что-то меня колбасит: открывают три дива, а закрывают только один    P.S. Правда лиса его некорректно отображает (без точек), но эт фикня. Нам IE только и нужен

Автор: ivashkanet 13.8.2007, 17:50

Так, оттещено -- работает как часы.  Только вот плохо, что несколько строчек оно не поддерживает. Получается это решение только одной части задания (с названием проекта), а часть с его описанием остаётся открытой (там где нжуно то же самое, но для 3-х строчек) Добавлено @ 17:51 Код <HTML> <BODY> <DIV STYLE="width: 100%; overflow: hidden; text-overflow:ellipsis"> <NOBR>We hold these truths to be self-evident, that all people are created equal. We hold these truths to be self-evident, that all people are created equal. We hold these truths to be self-evident, that all people are created equal. We hold these truths to be self-evident, that all people are created equal. We hold these truths to be self-evident, that all people are created equal. We hold these truths to be self-evident, that all people are created equal. <\NOBR> </DIV> <BODY> </HTML>

Автор: dazy 9.9.2007, 09:04

Может пригодится, подобный подход реализован в почте Яндекса. Там применяется "затухание" текста в конце строки. Посмотирте, может пригодится этот способ.

Автор: Bogdan1024 14.11.2007, 18:24

Вот столкнулся с такой же проблемой. А как вам такой вариант:  Код <asp:Label ID="Label3" runat="server" Text="Вы искали:" EnableViewState="False" Visible="False" style="overflow: auto; width: 440px; position: static" Width="440px" ></asp:Label>

Автор: Bogdan1024 16.11.2007, 15:58

А почему если написать этот стиль в div-е, то всё работает, а в спане не работает? Код .CutText {     width: 100%;      overflow: hidden;      text-overflow: ellipsis; } Код <span class="CutText">Этот текст не обрежется.</span> <div class="CutText">А этот текст обрезаться будет!</div>

Автор: Mymik 16.11.2007, 21:53

span это строчный элемент и он не имеет свойства width потому на него не распространяется ограничение по ширине. А div это блочный дип, и на него распространяется ограничение по ширине. А оно у тебя 100%.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)