CSS-обертка текста для IE6 +

У меня есть следующая структура HTML, которая создается представлением в среде MVC. Эта структура HTML неоднократно используется на странице, чтобы показать пары имя-значение формы, заполненной пользователем. Это в основном виджет HTML, который вызывается View для отображения каждой пары имя-значение.CSS-обертка текста для IE6 +

Для упрощения первоначальный атрибут класса был заменен атрибутом стиля, чтобы более четко видеть свойства.

<div> 
    <p> 
    <span style="display: inline-block; width: 40%;">Name:</span> 
    <span>Value</span> 
    </p> 
</div>

Это обычно отображается так:

Name: Value

В настоящее время, если "значение" слишком долго, дисплей делает это.

Name: This value is extremely 
too long for me.

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

Name: This value is extremely 
     too long for me. Any 
     longer string simply 
     adds to the bottom.

Единственный способ, которым я могу думать, чтобы сделать это и по-прежнему работать в IE6 является со столом тегов, но будет в конечном итоге много таблицы тегов для каждой пары имя-значение отображается. Я не могу помещать данные на странице в один тег таблицы. Есть ли более легкое решение в CSS/небольшие изменения в HTML, которые все еще будут работать в IE6?

источник

2013-07-26 Stephen

Вы можете использовать негативный текст-отступа (это относится только к первая строка), а затем равный по размеру margin-left, поэтому первая строка останется в sam е место, но следующие будут подталкиваться вправо. –

Есть способы справиться с этим, особенно с использованием свойства 'float', но было бы гораздо проще использовать разметку' table' (которая на самом деле не намного длиннее текущей разметки) или разметку 'dl'. Рекомендуется использовать HTML-разметку, которая дает приемлемый рендеринг по умолчанию, а затем при необходимости настраивать ее с помощью CSS, а не использовать абстрактную общую разметку типа 'div' и' span' и начинать задаваться вопросом, как сделать вещи выглядят прилично. –

Привет, Jukka, как я сказал в вопросе, используя теги таблицы означает, что каждый раз, когда вы вызывали эту функцию, она печатала крошечный тег таблицы. Хотя выполнимо, я не уверен, что это «хорошая» идея. Я посмотрю, пройдет ли это при просмотре кода. – Stephen

<div class="name_value"> 
<div class="name">Name</div> 
<div class="value">Extremely big text</div> 
<div class="clearfix"></div> 
</div> 

<style type="text/css"> 
.name_value { position: relative; } 
.name { float: left; display: inline; width: 50%} 
.value { float: right; display: inline; width: 50%; } 
.clearfix { clear: both; } 
</style>

источник

2013-07-26 16:59:52

Вы могли бы использовать что-то вроде этого: jsFiddle

HTML:

<div class="outer"> 
    <div class="left">Name:</div> 
    <div class="right">This value is extremely too long for me.</div> 
</div>

CSS:

.outer{ 
    width: 100%; 
    max-width: 200px; 
} 
.left{ 
    float: left; 
} 
.right{ 
    float: right; 
    max-width: 130px; 
}

источник

2013-07-26 17:04:58 ryanSrich

ответ

Смежные вопросы