Может ли текст переполнения быть центрированным?

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

Когда я указываю text-align:center для элемента с шириной, которая меньше ширины текста, текст выравнивается по левому краю окна содержимого и переполняет правый край поля содержимого.

Вы можете увидеть два случая в действии здесь.

Может ли любая магия CSS сделать текст одинаково переполнением как левого края, так и правого края поля содержимого, чтобы он оставался центрированным?

Ответ 1

Магия Div на помощь. В случае, если кому-то интересно, вы можете увидеть решение здесь.

HTML:

<div id="outer">
    <div id="inner">
        <div id="text">some text</div>
    </div>
</div>
<div id="outer">
    <div id="inner">
        <div id="text">some text that will overflow</div>
    </div>
</div>

CSS

#outer {
    display: block;
    position: relative;
    left: 100px;
    width: 100px;
    border: 1px solid black;
    background-color: silver;
}
#inner {
    /* shrink-to-fit width */
    display: inline-block;
    position: relative;
    /* shift left edge of text to center */
    left: 50%;
}
#text {
    /* shift left edge of text half distance to left */
    margin-left: -50%;
    /* text should all be on one line */
    white-space: nowrap;
}

Ответ 2

Я знаю, что этот вопрос старый, но у меня была одна и та же проблема, и я нашел гораздо более легкое решение только с пролетом. http://jsfiddle.net/7hy3w2jj/

<div>some text</div>
<div>
    <span class="text-overflow-center">some text that will overflow</span>
</div>

Тогда вам просто нужно это определение

.text-overflow-center {
    margin-left: -100%;
    margin-right: -100%;
    text-align: center;
}

Если вы можете работать с псевдоэлементами, это можно сделать без html. Просто добавьте это определение в свой текстовый контейнер. http://jsfiddle.net/7287L9a8/

div:before {
    content: "";
    margin-left: -100%;
}
div:after {
    content: "";
    margin-right: -100%;
}

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

Ответ 3

Странное требование. Я бы расширил поля до размера текста.

Одним из возможных решений может быть отрицательный текст-отступ: text-indent: -50px;, но это не будет работать для небольших текстов (сначала DIV в вашем примере). Здесь нет лучшей идеи.

Ответ 4

Попробуйте

word-wrap:break-word;

вместо:

white-space:nowrap;

или вы хотите только его на одной строке?

Ответ 5

этот, похоже, работает: добавьте блок-блок с относительным положением и слева: 50% margin-left: -100% вы можете увидеть его здесь Здесь код:

<style>
div {
    display: block;
    position: relative;
    left: 100px;
    height:1.5em;
    width: 100px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid black;
    background-color: silver;
}
span{
    display:block;
    position:relative;
    left:50%;
    margin-left:-100%;
}
</style>
<div><span>some text</span></div>
<div><span>some text that will overflow</span></div>

Ответ 6

Чтобы сделать решение для многострочного текста, вы можете изменить решение Nathan, изменив #inner слева от 50% до 25%.

Ответ 7

Дайте самый внутренний div некоторый margin: 0 -50%. Если все элементы являются блоками отображения или встроенным блоком, а выравнивание текста центрировано, это обеспечивает большую часть пространства для текста самого внутреннего элемента. По крайней мере, это работает для меня.