Модераторы: gambit

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Автоматическое обрезание текста по ширине лэйбла, ищется контрол или идеи как его сделать 
:(
    Опции темы
ivashkanet
Дата 9.8.2007, 11:35 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Кодю потиху
****


Профиль
Группа: Участник Клуба
Сообщений: 3684
Регистрация: 23.2.2006
Где: Гомель, Беларусь

Репутация: 1
Всего: 149



Всем привет.

Есть текст. Он может быть как маленький, так и большой. Но на его отображение выделено всего три строки, а с шириной этих строк вообще беда -- меняется в рантайме. 

Так вот этот текст, если помещается, должен быть полностью отображен, если нет, то обрезается чтобы влез, а в конце ставяться три точки (в этом случае при наведении на три точки или на сам текст должен всплывать полный текст). 
Так же ширина этого контрола зависит от: разрешения экрана, открытого окна, положения панельки (она может быть выдвинута, и задвинута, от этого зависит место, кот выделяется тексту).

Вопрос: может уже есть готовый контрол такого типа? Или, может, у кого есть идеи как его слепить самостоятельно.
На первое время пойдет определение длинны текста во время загрузки страницы (сейчас это всегда 45*3 символов, что не очень удобно).


Зарание спасибо, ivashkanet.



Это сообщение отредактировал(а) ivashkanet - 9.8.2007, 13:37
PM MAIL WWW ICQ   Вверх
tol05
Дата 9.8.2007, 13:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1632
Регистрация: 21.12.2006
Где: Харьков

Репутация: 34
Всего: 170



Ajax, HoverMenuExtender
если тебе нужен всплывающий текст, то это нужно повесить на клиента - значит, или ajax, или свои скрипты.

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



--------------------
На хорошей работе и сны хорошие снятся.
PM MAIL   Вверх
ivashkanet
Дата 9.8.2007, 14:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Кодю потиху
****


Профиль
Группа: Участник Клуба
Сообщений: 3684
Регистрация: 23.2.2006
Где: Гомель, Беларусь

Репутация: 1
Всего: 149



tol05, нито :(

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

Но будет некрасиво (это и не нравится заказчику):
user posted image
А если задвинуть панельку (что справа), то вообще будет куча места. Это при ширине 1280 пикселей.
PM MAIL WWW ICQ   Вверх
tol05
Дата 9.8.2007, 14:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1632
Регистрация: 21.12.2006
Где: Харьков

Репутация: 34
Всего: 170



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


--------------------
На хорошей работе и сны хорошие снятся.
PM MAIL   Вверх
ivashkanet
Дата 9.8.2007, 15:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Кодю потиху
****


Профиль
Группа: Участник Клуба
Сообщений: 3684
Регистрация: 23.2.2006
Где: Гомель, Беларусь

Репутация: 1
Всего: 149



Цитата(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, ...);
// а далее обрезать ненужную часть не проблема

PM MAIL WWW ICQ   Вверх
Mymik
Дата 9.8.2007, 21:10 (ссылка) |    (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1474
Регистрация: 12.5.2006
Где: Lamer-центер

Репутация: 50
Всего: 78



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

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


--------------------
ICQ ::            857-857
E-mail ::         mymik[at]inbox[dot]ru 
HomaPage ::  http://localhost/

:to_become_senile  :this
PM MAIL WWW ICQ   Вверх
ivashkanet
Дата 9.8.2007, 21:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Кодю потиху
****


Профиль
Группа: Участник Клуба
Сообщений: 3684
Регистрация: 23.2.2006
Где: Гомель, Беларусь

Репутация: 1
Всего: 149



Цитата(Mymik @  9.8.2007,  21:10 Найти цитируемый пост)
на стороне сервера нельзя узнать ширину клиентской части

Нууу, может браузер в реквесте отправляет какие-нить данные о размере окна
Но не важно, жаваскрипт так жаваскрипт smile
Цитата(Mymik @  9.8.2007,  21:10 Найти цитируемый пост)
сделать твой спан блоком, задать ширину и перехватывать resize окна, считать ширину области и ширину твоего контрола, после этого считать нужную тебе длину и обрезать текст

Есть идеи?
Цитата(Mymik @  9.8.2007,  21:10 Найти цитируемый пост)
ко всему ее можно можно и нужно решать с помощью html'я

Так любой контрол в конечном виде предвращается в HTML...
Цитата(Mymik @  9.8.2007,  21:10 Найти цитируемый пост)
кстати, можно делать обрезать и с помощью clip этот объект... 

Поподробнее тут плиз.



PM MAIL WWW ICQ   Вверх
Mymik
Дата 10.8.2007, 11:02 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1474
Регистрация: 12.5.2006
Где: Lamer-центер

Репутация: 50
Всего: 78



Цитата(ivashkanet @  9.8.2007,  21:24 Найти цитируемый пост)
Нууу, может браузер в реквесте отправляет какие-нить данные о размере окна
прикольно, а расскажи как ??? мне никогда не нужно было такое и я думал, что такие левые данные не приходят от пользователя к серверу... ведь по сути это лишний трафик.

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

Цитата(ivashkanet @  9.8.2007,  21:24 Найти цитируемый пост)
Поподробнее тут плиз.
 Это CSS пропортя... позволяет скрывать данные :о)

Добавлено через 1 минуту и 20 секунд
ivashkanet, кстати, а можешь написать шаблон того как это все выводиться ??? а то сложно предусмотреть все варианты :о) да и не хочется. Слишком много времени на это тогда потрачу.


--------------------
ICQ ::            857-857
E-mail ::         mymik[at]inbox[dot]ru 
HomaPage ::  http://localhost/

:to_become_senile  :this
PM MAIL WWW ICQ   Вверх
ivashkanet
Дата 10.8.2007, 11:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Кодю потиху
****


Профиль
Группа: Участник Клуба
Сообщений: 3684
Регистрация: 23.2.2006
Где: Гомель, Беларусь

Репутация: 1
Всего: 149



Цитата(Mymik @  10.8.2007,  11:02 Найти цитируемый пост)
прикольно, а расскажи как ???

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

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

Нуу, допустим, это таблица на три столбца. В центральном, например, лежит наш контрол. В стилях для него прописано занимать все доступное ему место. Таблица может менять свои размеры.
PM MAIL WWW ICQ   Вверх
Mymik
Дата 10.8.2007, 11:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1474
Регистрация: 12.5.2006
Где: Lamer-центер

Репутация: 50
Всего: 78



Цитата(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>
правильно ???




--------------------
ICQ ::            857-857
E-mail ::         mymik[at]inbox[dot]ru 
HomaPage ::  http://localhost/

:to_become_senile  :this
PM MAIL WWW ICQ   Вверх
ivashkanet
Дата 10.8.2007, 13:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Кодю потиху
****


Профиль
Группа: Участник Клуба
Сообщений: 3684
Регистрация: 23.2.2006
Где: Гомель, Беларусь

Репутация: 1
Всего: 149



Цитата(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, ОК, опять корректно обрезался.
PM MAIL WWW ICQ   Вверх
Idsa
Дата 10.8.2007, 18:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


Профиль
Группа: Участник
Сообщений: 2086
Регистрация: 5.12.2006
Где: Томск

Репутация: 15
Всего: 62



Цитата(ivashkanet @  10.8.2007,  13:25 Найти цитируемый пост)
Оооо, класс. Если эта штука ещё возвращает корректное значение, то это моя панацея

smile
Цитата

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.

Так что доверять этим значениям не стоит.


--------------------
Мой блог: alexidsa.blogspot.com
PM MAIL ICQ   Вверх
Zakonnic
Дата 13.8.2007, 16:40 (ссылка) |    (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 161
Регистрация: 25.4.2006

Репутация: 3
Всего: 6



ivashkanet, кажись, я знаю чо те надо.  smile  Можно же в стилях прописать, чтобы текст не отображался полностью, а уезжал за горизонт и ставил троеточие в конце. Это атрибуты 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>
 smile 
--------------------
...и никогда не пишите в комментариях правду
PM MAIL ICQ   Вверх
ivashkanet
Дата 13.8.2007, 17:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Кодю потиху
****


Профиль
Группа: Участник Клуба
Сообщений: 3684
Регистрация: 23.2.2006
Где: Гомель, Беларусь

Репутация: 1
Всего: 149



Zakonnic, "text-overflow : ellipsis; overflow : hidden" Выглядит неплохо smile
Попробую заюзать ;-)
Что-то меня колбасит: открывают три дива, а закрывают только один  smile 
P.S. Правда лиса его некорректно отображает (без точек), но эт фикня. Нам IE только и нужен
PM MAIL WWW ICQ   Вверх
ivashkanet
Дата 13.8.2007, 17:50 (ссылка) |    (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


Кодю потиху
****


Профиль
Группа: Участник Клуба
Сообщений: 3684
Регистрация: 23.2.2006
Где: Гомель, Беларусь

Репутация: 1
Всего: 149



Так, оттещено -- работает как часы. 
Только вот плохо, что несколько строчек оно не поддерживает.
Получается это решение только одной части задания (с названием проекта), а часть с его описанием остаётся открытой (там где нжуно то же самое, но для 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>


Это сообщение отредактировал(а) ivashkanet - 13.8.2007, 17:53
PM MAIL WWW ICQ   Вверх
Ответ в темуСоздание новой темы Создание опроса
Прежде чем создать тему, посмотрите сюда:
Любитель
Mymik
mr.DUDA

Используйте теги [code=csharp][/code] для подсветки кода. Используйтe чекбокс "транслит" если у Вас нет русских шрифтов.

Если Вам понравилась атмосфера форума, заходите к нам чаще! С уважением, Любитель, Mymik, mr.DUDA.

 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Разработка под ASP.NET | Следующая тема »


 




[ Время генерации скрипта: 0.0627 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.