Только CSS-форматирование обрезанного поля переменного размера - PullRequest
Новая
       30

Только CSS-форматирование обрезанного поля переменного размера

3 голосов
/ 26 апреля 2011

У меня есть текстовая строка и числовой идентификатор, который я хочу отобразить рядом друг с другом:

Это строка [123]

Кажется достаточно простым, но я не могу контролировать длину строки или размер контейнера, в который я ее помещаю. Первая проблема - заставить их выстроиться в ряд рядом друг с другом, и я использовал трюк Я нашел на SO: 

<div>
    <div class="display_field">
        <div class="label">This is a long string that should be cropped.</div>
        <div class="id">[123]</div>
    </div>
</div>

Применяя этот CSS, я получаю две строки рядом друг с другом: 

* { font-size: 12px; }  /* Just for testing. */

.label, .id {
    display: table-cell;
}

Теперь я могу отобразить Это длинная строка, которая должна быть обрезана. [123]

Проблема в том, что внешний DIV имеет фиксированную ширину, которая слишком мала (как это часто бывает): 

<div style="width:125px;"> <!-- Just testing, I have no control over this guy. -->
    <div class="cropped_field">
        <div class="label">This is a long string that should be cropped.</div>
        <div class="id">[123]</div>
    </div>
</div>

Вывод теперь будет выглядеть так: 

This is a long string  [123]
that should be
cropped.

А я хочу This is a long string [123]

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

Я получил так много полезных ответов, погуглив и найдя полезные посты на SO, я решил присоединиться и попробовать задать свой вопрос.

Несколько вещей, на которые следует обратить внимание (не уверен, что это повредит или поможет ситуации):

  • Я не могу контролировать значение идентификатора, это может быть [1] или [9999999] - я не хочу жестко кодировать ширину этого (или "display_field" или " ярлык "в этом отношении. Даже проценты будут вызывать проблемы.

  • Возможно, в этой среде не включен JavaScript (хотелось бы использовать плагин jQuery!)

  • Контейнером может быть тег любого типа, но обычно это DIV. Я действительно не контролирую разметку за пределами моего поля «display».

  • Я управляю разметкой «display_field» и могу использовать теги SPAN или любой другой HTML, который выполняет свою работу.

  • Я пишу это только для FireFox (требуется 3) и Chrome, другая совместимость с дрянными браузерами не нужна (да, я смотрю на вас, IE).

  • Поле «id» всегда будет числом в квадратных скобках, так что вам не о чем беспокоиться.

  • Нет необходимости помещать многоточие там, где заканчивается обрезанный текст. Это хорошая функция, но я не вижу способа заставить ее работать в FireFox (есть взлом для 3.x, но ничего для версии 4).

1 Ответ

1 голос
/ 26 апреля 2011

Как насчет следующего?В основном он основан на предоставленных вами выдержках. 

.cropped_field
{
    height:1.4em;
    overflow:hidden;
}

Взгляните на демонстрационную скрипку .

...