Изучите реализацию однострочного текста CSS по центру и многострочного текста слева

Оригинальная ссылка
GitHub.com/xbox y Нажмите / Не...

давным-давно

Когда я впервые вошел во фронтенд, продакт-менеджер выдвинул такое требование

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

Поразмыслив некоторое время, я действительно последовал логике менеджера по продукту и прошелjsСудите о высоте текста.Если строк больше одной, добавьте имя класса, а мест с таким текстом много, значит он тоже пройден.Самый важный момент это время выполнения метода, которое может быть просто высота до сих пор недоступна (кажется, что в то время использовался таймер, который также вызывал феномен сначала центрирования, а затем прыжка влево)...

//伪代码
$('.text').each(function(){
    if($(this).height()>30){
        $(this).addClass('mul');
    }
})

Потом эти тексты могут еще генерироваться динамически, так что приходится снова вызывать этот метод в месте генерирования текста.Функция сделана, но не говоря уже о том, как многословно, опыт не очень хороший (хотя посторонние не могут смотри как придет)

Я думал, еслиCSSРеализовано, то можно вообще не рассматривать эти вопросы!

Об идеях реализации CSS

На самом деле, пока ваша логика ясна,jsЭто можно реализовать, просто шаг за шагом следуя нормальному мышлению.CSSНе так, ей нужно больше вашего воображения.

Например, приведенное выше требование, на первый взгляд, требует оценки количества строк текста, что совсем не так.CSSМожем сделать это, но мы можем мыслить в другом направлении, текст по умолчанию центрирован слева (обтекание текста по умолчанию), центрирована только первая строка, первая строка может напоминать::first-lineПсевдоэлемент, поэтому вы можете попробовать реализовать его так

<p>这段文字能不能这样判断一下，当文字不足一行时，让它居中显示，当文字超过一行就让它居左</p>

p::first-line{
    text-align:center;
}

Это легко понять, не так ли? Центрируется только первая строка. Когда строк несколько, первая строка уже закрыта, и эффект центрирования или центрирования слева не очевиден. Это просто немного ошибочно. Эффект центрирования первая строка и текст позади. Он кажется немного неаккуратным (потому что он упадет, когда оставшееся пространство в строке будет меньше одного символа)

Так же очень просто решить эту проблему.Вышеупомянутая проблема заключается в том, что первая линия всегда находится в центре.Есть ли способ центрировать ее только тогда, когда одна линия находится в центре? Здесь вы можете использоватьtext-align-last, что означает указать метод центрирования последней строки многострочного текста, если и::first-lineиспользовать вместе,И первая строка, и последняя строка должны быть удовлетворены, считается ли, что в настоящее время существует только одна линия?

p::first-line{/*匹配首行*/
    text-align-last:center;/*最后一行居中*/
}

Сейчас это нормально, немного похоже на щипок~

See the Pen

К сожалению, из-за::first-lineСтили поддержки очень ограничены (MDN), описанный выше метод реализации толькоchromeверно, но эта логика по-прежнему согласуется сjsОчень разные

Хотя вышеизложенное неtext-alignсвязанные свойства, ноchromeНо уже поддерживается~

лучшая реализация

1. Родительtext-align:center, ребенокinline-block+text-align:left

Сначала взгляните на лучшую реализацию совместимости

Структура выглядит следующим образом

<div class="content">
    <span class="text">这段文字能不能这样判断一下，当文字不足一行时，让它居中显示，当文字超过一行就让它居左</span>
</div>

Стиль выглядит следующим образом

.content{
    text-align: center;
}
.text{
    display: inline-block;
    text-align: left;
}

Этот метод впервые был использован в"Мир CSS"учился в средней школе,

Общий принцип таков:

Для элемента, если егоdisplayСтоимость свойстваinline-block, то его ширина определяется внутренним элементом, но всегда меньше размера контейнера, содержащего блок, то есть "усаживается по размеру"

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

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

• Когда текста много,.textШирина следует за родительским контейнером из-заtext-align:centerбудет передаваться по наследству, поэтому в.textПросто исправить это

See the Pen

Отличная совместимость~

2.width:fit-content+margin:auto

Вышеупомянутый способ - через родителяtext-align:centerреализоватьinline-blockПо центру, что удобно, но добавляет дополнительные метки, потому чтоinline-blockЭлементы не могут центрироваться сами по себе.

блочный уровеньblockЭлементы можно передавать сразу после установки шириныmargin:0 autoЧтобы добиться центрирования, но ширина должна быть указана, иначе она будет заполнена по горизонтали.Взаимосвязь между ними очень тонкая.Есть ли способ сделать уровень блокаblockШирина элемента равнаinline-blockКак насчет элементов, которые следуют за внутренними элементами?

ответwidth:fit-content, пожалуйста, обратитесь кэта статья

width:fit-contentЭффект усадки элемента может быть достигнут при сохранении первоначальногоblockгоризонтальное состояние, поэтому вы можете использовать его напрямуюmargin:autoРеализуется центрирующий эффект внутренних адаптивных и синхронных элементов.

Для следующих реализаций требуется только один слой тегов.

<p class="text">这段文字能不能这样判断一下，当文字不足一行时，让它居中显示，当文字超过一行就让它居左</p>

.text{
    width: fit-content;
    width: -moz-fit-content;//火狐需要-moz-前缀
    margin: 0 auto;
}

See the Pen

Конечно, эта особенностьIEОпределенно не поддерживается~

3.position:relative+transform

еще нужно настроитьdisplay:inline-blockдобиться адаптации, а затем сотрудничать сtransformДля достижения эффекта горизонтального центрирования реализация тоже очень проста~

.text{
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

See the Pen

4.display:table+margin:auto

прежний путьwidth:fit-contentочень эффективный,IEЧто делать, если он не поддерживается? На самом деле по умолчаниюdisplayуже имеет эту функцию, когдаdisplayСтоимость свойстваtable, элемент будет проявляться иwidth:fit-content, который поддерживает как ширину внутреннего элемента, так и горизонтальное направление.marginпо центру

.text{
    display: table;
    margin: 0 auto;
}

See the Pen

IE8Также отлично поддерживается~

5.flexа такжеgridвыполнить

дляflexа такжеgridДобиться такого эффекта довольно легко.

существуетflexВ контейнере все дочерние элементы становятся flex-элементами, включая простые текстовые узлы (анонимные блоки), как бы завернутые в слой, поэтому их легко передать.justify-content: centerРеализуйте центр, и (анонимное поле) также следует адаптивной ширине текста, когда более одной строки выравниваются в тексте по умолчанию.

gridТо же самое, но выравнивание нужно пройтиjustify-items: center.

• flexвыполнить

.text{
    display: flex;
    justify-content: center;
}

See the Pen

• gridвыполнить

.text{
    display: grid;
    justify-items: center;
}

See the Pen

относительноflex,gridСовместимость меньше, поэтому старайтесь выбиратьflexспособ, по крайней мере, на мобильных иIE10(нужно-ms-) Это хорошо

6.floatвыполнить

я думалfloatНе могу, спасибоЛинь Сяочжипри условииfloatСпособ реализации центрирования, общий принцип таков: самfloatЭлементы имеют характеристики обтекания.Основная сложность заключается в том, как их центрировать.Ведь нетfloat:centerПри таком способе письма здесь в основном используются два слоя этикеток.position:relative;left:50%Положительное и отрицательное смещение для достижения

.content{
    position: relative;
    float: left;
    left: 50%;/**父级设置50%**/
}
.text{
    position: relative;
    float: left;
    left: -50%;/**子级设置-50%**/
}

See the Pen

Немного громоздкий, но тоже метод, и совместимость тоже отличная

резюме

Всего выше перечислено 8 способов реализации.Конечно, первый экспериментальный и имеет плохую совместимость, но это тоже идея. Как вы пришли к этим методам?

Во-первых, это Леново. Например, упомянутая выше самоадаптация (просто говоря, размер определяется содержанием), я думаю, какие из них могут добиться самоадаптации? Кромеinline-block,а такжеfloat,position:absolute,display:tableЖдать...первыйfloatИсключается, элемент устанавливаетсяfloatПосле этого общая центровка на самом деле хлопотная вещь, почти невозможная(После тестирования это может быть достигнуто).position:absoluteЕсть еще надежда,left:50%;transform:translateX(-50%)Эффект центрирования может быть достигнут.Попробовав некоторое время, я обнаружил, что ширина не может быть адаптирована к ширине родителя.Это также не удается (может быть, может, но я этого не ожидал)~~ Наконец, я выбралdiaplay:table, который также постепенный.flexа такжеgridНе говоря уже о том, что он изначально создан для гибкой компоновки, и неудивительно, что достигается такой эффект.

Второй — основы.CSSАтрибутов очень много, они просто остаются на поверхности, и многие, казалось бы, нерелевантные атрибуты будут иметь некоторые тонкие отношения во всей системе, такие как вышеwidth:fill-content, это должно быть очень безвкусно видеть это в одиночку, его можно использовать полностьюinline-blockвместо этого, но он может сделать обычныйdivэлементы имеютinline-blockхарактеристики, мы должны восхищатьсяCSSДизайн ~ (необходимо участие дизайнеров)

Некоторое время назад я думал о создании инструмента визуального редактирования, надеясь передать некоторые свойства, напримерphotoshopТаким образом, непосредственно создайте страницу, подумайте об этом и обнаружите, что вы можете создавать только самые основные стили, то есть цвет, размер и т. д. Если вы хотите создать эффект, подобный этой статье, 80% из них могут не делать этого, кроме самой разработки. , Как другие могли знать эту настройку? Путь инструментов визуального редактирования все еще очень долог, поэтому не нужно беспокоиться о том, что их заменят другими «инструментами генерации в один клик»~

Если у вас есть другие методы реализации, вы можете оставить комментарий ниже, если в статье есть какая-либо ошибка, пожалуйста, укажите ее вовремя, спасибо~