HTML / CSS: как добиться следующего центрирования по левому краю? - PullRequest
Новая
       8

HTML / CSS: как добиться следующего центрирования по левому краю?

1 голос
/ 23 января 2011

Короткая версия

Я хочу расположить текст внутри элемента (фиксированной ширины) таким образом, чтобы, если он достаточно короткий, он был отцентрирован, но если он был слишком длинным, то выровнялся по левому краю текста будет обрезано (через overflow: none). В этом случае будет всплывающая подсказка (через title="") с полным текстом. Как я могу это сделать?

Полная версия

Элемент, на который я ссылаюсь, это заголовок под картинкой. Поскольку есть много картинок рядом, я не хочу, чтобы заголовки перекрывались или что-либо еще (они абсолютно расположены под картинкой с фиксированной шириной и высотой). Для заголовка это будет выглядеть лучше, если оно будет отцентрировано, но длинная строка с overflow:none, которая обрезает оба конца из-за центрирования, будет выглядеть плохо. В настоящее время у меня есть это: 

<div class="ImageTitle">
    <table style="margin: auto">
        <tr><td title="The title">The title</td></tr>
    </table>
</div>

Это, по меньшей мере, хакерство, но я не могу заставить его работать с простыми DIV s и SPAN s. Есть идеи?

Ответы [ 3 ]

2 голосов
/ 24 января 2011

Я думаю, что это должно делать то, что вы хотите: 

div.ImageTitle {
    width: 100px; /* or whatever */
    white-space: nowrap;
    text-align: center;
    overflow: hidden;
}

JS Fiddle demo .

Обратите внимание, что я предполагаю удаление (ненужного table), если таблица все еще там, тогда ее CSS переопределит значение div.imageTitle.

Хотя этот не условно присваивает text-align: center или text-align: left, первый (text-align: center;) будет просто естественным образом перемещаться от центра элемента к левому краю элемента ( если text-direction не установлен на значение, отличное от ltr), и переполнение справа. Чтобы убедиться, что он остается только в одной строке, я использовал white-space: nowrap для удаления переноса.

Для всплывающей подсказки я боюсь , что придется жестко закодировать в div (или любой другой элемент, который вы используете), так как нет способа использовать html, чтобы он мог работать, если / else statemnts. Если вы хотите использовать JavaScript, то это возможно, но не с , просто html / css.

1 голос
/ 24 января 2011

Это помогает?(Извините, уже поздно, я устал и не сконцентрирован)

0 голосов
/ 24 января 2011

Я думаю, что единственный способ сделать это - использовать JavaScript.

...