Текст центра больше, чем контейнер? (Без использования отдельного дочернего элемента)

Используя CSS, легко горизонтально центрировать текст в контейнере с помощью text-align:center;, но если какое-либо одно слово этого текста больше ширины контейнера, браузер автоматически "зажимает" левую границу контейнера (так же, как и в надстрочном слове, выравнивается с левой стороной слишком маленького контейнера, и без значения свойства CSS word-break:hyphenate; (или аналогичного) над заглавным краем контейнера выдается надразмерное слово.

enter image description here Любой способ поместить этот рис слева от моего текста здесь, чтобы сохранить вертикальное пространство? Ну что ж. В любом случае...

Без, используя элемент дочернего контейнера для хранения текста, есть способ center увеличить размер слова, чтобы он зависал как с левой, так и с правой стороны контейнер равно?

Опять же, я не хочу использовать текстовый контейнер внутри контейнера. Я мог бы сделать это через 5 секунд с помощью дочернего <div>text to be centered</div> с фиксированным width и отрицательным margin-left или с absolute позиционированием элемента контейнера внутри relative div, но я ищу атрибут CSS, который будет центрировать текст, даже если слово слишком длинное, чтобы соответствовать ширине. По умолчанию text-align:center этого не делает.

Мысли? Благодарю! -Slink

Ответы

Ответ 1

Эта скрипта показывает три элемента div, иллюстрирующие "проблему" и оба следующих "решения".

Одно возможное "решение"

Я не уверен в ваших потребностях, но до сих пор единственным реальным решением, которое я нашел, является установка display: table в текстовый контейнер. Но это позволит контейнеру растягиваться до необходимой ширины, чтобы содержать самое длинное слово, что может быть нежелательно для вас. Если все в порядке, это лучшее решение.

Другое возможное "поддельное" решение

Если вы должны хотя бы сохранить видимый размер элемента, то вы можете подделать внешний вид некоторым использованием псевдоэлементов:

.fakeIt {
    text-align: center; /* what you wanted all along */
    display: table; /* key to get centered */
    position: relative; /* allow reference for absolute element */
    z-index: 2; /* set up for a background to be pushed below */
    width: 40px; /* what you want, but table resizes larger if needed*/
    border: none; /* transferring border to the "fake" */
    background-color: transparent; /* transferring background to the "fake" */
}

.fakeIt:after {
    content: ''; /* before or after need it, even if empty */
    width: 40px; /* the original width you wanted for the container */
    position: absolute; /* need this to position it */
    z-index: -1; /* push it behind the foreground */
    left: 50%; /* push it to center */
    top:0; /* give it height */
    bottom: 0;  /* give it height */
    margin-left: -20px; /* half the width to finish centering */
    border: 1px solid red; /* the border you wanted on the container */
    background-color: yellow; /* the background you wanted on the container */
}

Однако, в зависимости от вашего конкретного приложения, "фальшивое" решение может не работать. Кроме того, исходный элемент по-прежнему будет занимать более широкое "пространство" в документе, он просто не будет выглядеть так, как есть. Это может вызвать проблемы. Отрицательный margin в контейнере может решить это, но вы не знаете, какое значение нужно установить, так как оно будет отличаться от ширины текста.

Вы отмечаете в комментарии, что вы не знакомы с псевдоэлементами в css, поэтому вы можете иметь быстрый ввод.

Ответ 2

Эта проклятая горизонтальная полоса прокрутки!

http://jsfiddle.net/sqKU6/

<div class="inner">
    aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa 
</div>
​

CSS

.inner {
    text-align: center;
    position: relative;
    left: +450%;
}
.inner:before {
    content: '';
    display: inline-block;
    margin-right: -900%;
}
​

Ответ 3

Я использую это решение:

.limited-string {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 90%;
}