Чи можна розтягнути текст у CSS? Я не хочу, щоб шрифт був більшим, тому що він виглядає сміливішим, ніж менший текст поруч. Я просто хочу розтягнути текст вертикально, щоб він був деформованим. Це було б в одному діві, а тоді звичайний текст поруч із ним буде в іншому. Як я можу це зробити?

Так, ви можете насправді за допомогою CSS 2D Transforms. Це підтримується майже у всіх сучасних браузерах, включаючи IE9 +. Ось приклад.

HTML

<p>I feel like <span class="stretch">stretching</span>.</p>

CSS

span.stretch {
    display:inline-block;
    -webkit-transform:scale(2,1); /* Safari and Chrome */
    -moz-transform:scale(2,1); /* Firefox */
    -ms-transform:scale(2,1); /* IE 9 */
    -o-transform:scale(2,1); /* Opera */
    transform:scale(2,1); /* W3C */
}

Порада. Можливо, вам потрібно буде додати поле до розтягнутого тексту, щоб запобігти зіткненням тексту.

Я відповім за горизонтальне розтягнення тексту, оскільки вертикаль - це легка частина - просто використовуйте "transform: scaleY ()"

.stretched-text {
  letter-spacing: 2px;
  display: inline-block;
  font-size: 32px;
  transform: scaleY(0.5);
  transform-origin: 0 0;
  margin-bottom: -50%;
}
span {
  font-size: 16px;
  vertical-align: top;
}

<span class="stretched-text">this is some stretched text</span>
<span>and this is some random<br />triple line <br />not stretched text</span>

інтервал між літерами просто додає простір між літерами, нічого не розтягує, але це свого роду відносно

inline-block, тому що вбудовані елементи є занадто обмежуючими, а код нижче не працює

Тепер комбінація, яка має значення

розмір шрифту, щоб досягти потрібного нам розміру - таким чином текст буде дійсно такою, якою він повинен бути, а текст до і після того, як він з’явиться поруч (scaleX - це лише для показу, браузер все ще бачить елемент у вихідному розмірі при розташуванні інших елементів).

scaleY, щоб зменшити висоту тексту, щоб він був таким самим, як текст поруч.

transform-origin, щоб зробити масштаб тексту зверху рядка.

граничне нижнє значення встановлюється на від'ємне значення, так що наступний рядок не буде далеко нижче - бажано відсотків, так що ми не будемо змінювати властивість висоти рядка. вертикальне вирівнювання встановлено вгорі, щоб запобігти плаванню тексту до чи після нього на інші висоти (оскільки розтягнутий текст має реальний розмір 32 пікселів)

- Простий прольотний елемент має розмір шрифту, лише як еталон.

У запитанні було запропоновано спосіб запобігти сміливості тексту, викликаному розтяжкою, і я все ще не дав жодного, АЛЕ властивість шрифту має більше значень, ніж просто нормальне та жирне .

Я знаю, ви просто не бачите цього, але якщо шукати відповідні шрифти , ви можете використовувати більше значень.

Технічно ні. Але те, що ви можете зробити, це використовувати розмір шрифту, який є таким же високим, як ви хотіли б, щоб він був розтягнутим шрифтом, а потім конденсувати його по горизонталі font-stretch.

Єдиний спосіб, який я можу придумати для коротких текстів, таких як "МЕНЮ", - це скласти кожну окрему букву в проміжок і обгрунтувати їх у контейнері. Подобається це:

<div class="menu-burger">
  <span></span>
  <span></span>
  <span></span>
  <div>
    <span>M</span>
    <span>E</span>
    <span>N</span>
    <span>U</span>
  </div>
</div>

А потім CSS:

.menu-burger {
  width: 50px;
  height: 50px;
  padding: 5px;
}

...

.menu-burger > div {
  display: flex;
  justify-content: space-between;
}

CSS-розтяжка шрифтів тепер підтримується у всіх основних браузерах (крім iOS Safari та Opera Mini). Нелегко знайти спільне сімейство шрифтів, яке підтримує розширення шрифтів, але легко знайти шрифти, які підтримують конденсацію, наприклад:

font-stretch: condense;
font-family: sans-serif, "Helvetica Neue", "Lucida Grande", Arial;

Завжди повертаюся до цієї сторінки, коли дизайнер натягує на мене шрифт. Прийняте рішення працює чудово, але я часто стикаюся з проблемами з маржами.

Я б рекомендував використовувати перетворення на висоту замість ширини, якщо ви стикаєтеся з проблемами, було безпечнішим для мене в моєму поточному проекті.

.font-stretch {
    display: inline-block;
    -webkit-transform: scale(1,.9);
    -moz-transform: scale(1,.9);
    -ms-transform: scale(1,.9);
    -o-transform: scale(1,.9);
    transform: scale(1,.9);
}