CSS-calc () on font-size-изменение размера шрифта на основе размера контейнера

у меня есть ситуация, когда у меня есть элемент контейнера (div), которая содержит текст. Этот текст иногда будет очень большим-не большим абзацем, но потенциально может превышать ширину текста.

очевидно, в большинстве ситуаций он будет просто выбивать части текста на следующую строку, но я хотел посмотреть, если calc() можно использовать на font-size чтобы изменить размер шрифта, чтобы убедиться, что он всегда подходит в пределах div он находится. Это может быть сделано?

.name { width: 500px; font-size: 64px; }

<span class="name">Sometimes it is short</span>

<span class="name">Sometimes it is going to be really long, and people put long names</span>

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

я нашел этот пост, чтобы сделать это с помощью JavaScript, но это было давно, и я думаю, CSS3 имеет много новых вещей, которые могут позволить это сделать без всяких скриптов. автозаполнение

6
css css3

4 ответов

Calc все еще находится в младенчестве с точки зрения поддержки и полезности. По дизайну это действительно просто для простой математики, например (100% - 20px). Он действительно не будет делать математический комплекс достаточно, чтобы сделать расчеты возможными. Вы ищете решение, которое будет определять размер текста на основе объема пространства, которое буквы физически занимают по горизонтали (что зависит от индивидуального размера буквы) и объема пространства, доступного для содержащего div.

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

Проверьте сообщение Криса Койера о том, что Calc может быть удобно для: http://css-tricks.com/a-couple-of-use-cases-for-calc/

5

вот возможное решение:

http://codepen.io/CrocoDillon/pen/fBJxu

p {
  margin: 0;
  font-size: calc(4vw + 4vh + 2vmin);
  /* See:
   * http://codepen.io/CrocoDillon/pen/jgmwt
   * For some math behind this
   */
}

Font-size вычисляется с доступным размером, используя функцию, которая не идеальна, но может быть скорректирована для работы хорошо в некоторых случаях.

7

Это все еще почти невозможно только в CSS, так как размер каждого символа в разных шрифтах нам не известен через CSS. Существует плагин jQuery под названием fitText это очень хорошо справляется с такими вещами.

1

только одно уточнение:

Если вы используете что-то вроде:

font-size: -webkit-calc(100% + 30px);
font-size:        -calc(100% + 30px);

это добавляет 30px к 100% размеру шрифта по умолчанию, он не может быть связан с шириной контейнера.

хотя, вы можете сделать математику как:

font-size: -webkit-calc( 100% * 0.09479166667 - 6.666666669px );
font-size:        -calc( 100% * 0.09479166667 - 6.666666669px );

... но он просто вычислит его против 1em.

0