Войти
Меню :
js (294)
php (388)



Blog (1572)
php (388)
js (294)
html (151)
css (138)
html tags (62)
js tag (56)
js method (44)
jquery (42)
php array (38)
text (37)
ruweb.net (37)
js date (33)
online (30)
fonts (30)
form html (30)
Показать еще :
js events (22)
php file (21)
other (21)
atom (20)
foto (20)
database (19)
forum (19)
input (19)
php date (18)
svg (18)
lingvo (17)
info (17)
hosting (17)
mysql (17)
php img (16)
board (16)
php time (16)
dosite (16)
color (15)
img (14)
js url (14)
jsphp (14)
js time (14)
html book (14)
table (13)
знак (13)
htaccess (13)
osclass (13)
yandex (13)
notepad (13)
select (13)
dw block (12)
download (12)
keyboard (12)
php path (12)
$ server (11)
icon (11)
form (10)
vs code (10)
js delete (10)
browser (10)
chart (10)
mouse (10)
ftp (9)
hover (8)
php url (7)
php post (7)
comment (7)
js vars (6)
php get (6)
adminka (6)
hey tag (6)
iframe (6)
click (6)
list (6)
canvas (6)
tag a (5)
web (5)
нок (5)
js id (5)
heading (5)
value (5)
js math (5)
reg.ru (5)
console (5)
mb (5)
js file (5)
year (5)
vk (4)
scandir (4)
xml (4)
task (4)
month (4)
base64 (4)
pages (4)
day (4)
bbcode (4)
js form (4)
ssl (4)
week (4)
js hash (4)
numbers (4)
php var (4)
symbols (4)
youtube (4)
games (4)
submit (4)
aimp (3)
units (3)
file (3)
video (3)
рся (3)
captcha (3)
line (3)
padding (3)
js post (3)
ucoz (3)
https (3)
jquery post (3)
куб (3)
money (3)
domen (3)
qr code (2)
details (2)
height (2)
src (2)
counter (2)
tag hr (2)
sitemap (2)
prompt (2)
seo (2)
arrows (2)
google (2)
blob (2)
js img (2)
typeof (2)
scroll (1)
rutube (1)
windows (1)
cursor (1)
jino (1)
speed (1)
lingvo (1)
ok (1)
archive (1)
smile (1)
php day (1)
нод (1)
webp (1)

Шрифт от количества символов

Как можно контролировать/уменьшать/увеличивать размер шрифта в зависимости от количестве символов? Это можно сделать несколькими способами:

Шрифт в зависимости от количества символов.

  1. Шрифт в зависимости от количества символовphp.
  2. Код : Шрифт в зависимости от количества символов php
  3. Код : Шрифт в зависимости от количества символов (js)

  1. Шрифт в зависимости от количества символовphp.

    Не буду подробно рассказывать математику(только схематично), если учились в школе хорошо, то - это просто! Если нет, то бегом обратно в школу!

    Размер шрифта в зависимости от количества символов:

    Сделаем функцию, которая будет возвращать размер шрифта в зависимости от количества символов, для этого нам понадобится:

    Создадим тестовый стенд из div с идентификатором класса

    <div class=example style="font-size:<?=countSimbols('123456789')?>px">123456789</div>

    Поместим внутрь.. число/текст + атрибут "style" + значение "font-size" будем получать через php:

    + нам нужны стили, ширина для примера возьмем 300px + остальные стили и у нас получится:

    123456789
    Php:

    Алгоритм совершенно простой:

    В функцию получаем количество символов с помощью str_split разбиваем в массив, потом считаем с помощью count.

    $sp = count(str_split($e));

    В условии (if) поместим, если количество символов, более 10... будет срабатывать наша "математика"

    if($sp >=10)
    Иначе - оставляем шрифт 25 :
    Теперь о математике.

    Ширину блока - 300 делим на количество символом - получаем ширину одного символа.

    Далее умножаем на 1.6 - что это за число...

    Это число вычисляется очень просто... :

    Заполнили блок количеством символов, которое не выходят за пределы блока. 300 -ширина, количество символов в блоке - 40, font-size =13, найти "Х":

    (300/40) * Х = 13


  2. Код : Шрифт в зависимости от количества символов - php

    Довольно длинный получился предыдущий пункт, поэтому, код "Шрифт в зависимости от количества символовphp" - в отдельном пункте:

    Код в сборе - Шрифт в зависимости от количества символовphp

    Php:

    <?

    function countSimbols($e)

    {

    $sp = count(str_split($e));

    if($sp >=10) return (300/$sp)*1.6; else return 25;

    }

    ?>

    Html:

    <div class=example style="font-size:<?=countSimbols('123456789')?>px">123456789</div>

    Примеры: Шрифт в зависимости от количества символовphp

    Менее 10 символов - style="font-size:25px":

    123456789

    10 символов - style="font-size:48px":

    1234567890

    20 символов - style="font-size:24px":

    12345678901234567820

    24 символов - style="font-size:20px":

    123456789012345678901224

    30 символов - style="font-size:16px":

    123456789012345678901234567830

    40 символов - style="font-size:12.631578947368px":

    12345678901234567890121234301234567840

    50 символов - style="font-size:9.7959183673469px":

    1234567890123456789012123430123456789001234567850

  3. Код : Шрифт в зависимости от количества символов (js)

    Регулирование шрифта в зависимости от количества символов в javascript.

    Для этого вам понадобится:

    Знания javascript и переписать выше приведенный код php на javascript.

    Пишем аналогичную функцию, которая будет возвращать число font-size в зависимости от количества символов. Алгоритм совершенно аналогичный:

    Получаем содержимое из блока - innerHTML.

    Разбиваем в массив - split.

    Возвращаем массив ключей - Object.keys.

    Считаем длину массива - length.

    Математику смотри выше пунктом...

    Соберем весь код:

    Код javascript Шрифт в зависимости от количества символов

    Теперь нам остается собрать весь код "Шрифт в зависимости от количества символов" в javascript.

    Html:

    <div class="example" id="example1">12345678901234567890</div>

    <div class="example" id="example">12345678901234567890121234301234567840</div>

    <div class="example" id="example5">1234567890123456789012123430123456789001234567850</div>

    Javascript

    <script>

    function countSimbols(e)

    {

    var result = Object.keys(e.innerHTML.split('')).length;

    if(result >=10) return (300/result)*1.6; else return 25;

    }

    example1. style = "font-size:"+countSimbols(example1)+"px";

    example . style = "font-size:"+countSimbols(example)+"px";

    example5 . style = "font-size:"+countSimbols(example5)+"px";

    </script>

    Пример javascript Шрифт в зависимости от количества символов

    Далее разместим выше приведенный код прямо здесь:

    12345678901234567890
    12345678901234567890121234301234567840
    1234567890123456789012123430123456789001234567850
Не стесняемся говорить спасибо!
Помочь проекту DwWeb.ru

Поделиться ссылкой! C друзьями или врагами!

Этим вы очень поможете проекту! Заранее огромное спасибо!

На сайте сейчас :
dwweb.ru есть здесь:
Все соцсети в одном месте!
Ещё :Игра "пятнашки"
Угадай страну по флагу
+
Как сделать сайт?
Md5 онлайн
Списки шифрования
Sitemap.html
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Лучший хостинг : RUWEB + помощь по RUWEB Сайт работает круглосуточно 24/7.
Страница загружена за : 0.105471 секунд.