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

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

53 голосов
/ 08 июля 2011

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

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

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

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

Ответы [ 8 ]

89 голосов
/ 30 января 2015

Я знаю, что этот вопрос старый, но у меня была та же проблема, и я нашел гораздо более простое решение с помощью всего лишь промежутка.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%;
}

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

14 голосов
/ 08 июля 2011

Разделите магию на помощь.Если кому-то интересно, вы можете увидеть решение здесь .

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;
}
9 голосов
/ 30 мая 2018

Это выглядит старый вопрос.

Теперь я думаю, что есть хороший ответ с flex.

Вы можете сделать это просто так: 

<div id="small_div">overflowing text</div>

#small_div {
    display: flex;
    justify-content: center;
}

Вот и все.

Надеюсь, вам очень поможет!

0 голосов
/ 02 февраля 2015

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

0 голосов
/ 28 августа 2014

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

0 голосов
/ 08 июля 2011

этот, похоже, работает: добавьте блок-обертку с положением относительно и слева: 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>
0 голосов
/ 08 июля 2011

Попробуйте 

word-wrap:break-word;

вместо: 

white-space:nowrap;

или вы хотите только одну строку?

0 голосов
/ 08 июля 2011

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

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

...