Уменьшение шрифта в зависимости от количества символов
Постараюсь быть краток и изложить всю суть проблемы: Во-первых, насколько я понял данную задачу реализовать с помощью html+css невозможно, и нужно будет прибегнуть к JS. У меня есть форум в котором заголовки на некоторой ширине занимают более двух строк, что для меня это выглядит совершенно неприемлемо.
<div class="list-inner">
<a class="unread" href="./viewtopic.php?t=10&view=unread#unread"><i class="icon fa-circle fa-fw icon-red icon-md" aria-hidden="true"></i></a>
<a href="./viewtopic.php?t=10" class="topictitle">Maximum Topic Title Length 90 Characters Hello People Welcome To Snapchat Chattin Topic XO</a>
^-Код отвечающий за отображение заголовка
Так как в JS я полный 0, хотелось бы получить помощь в написании скрипта, который будет уменьшать шрифт и учитывать следующие условия:
- Применяться скрипт будет на заданной ширине min-width:1198.5px and max-width:1365.5px.
- Если количество символов в заголовке больше 70, то данный заголовок получает новый класс, условно "topictitlemin", которому задается параметр font-size: 1em;
Если не сложно, распишите как можно подробнее, что как и куда, и где какая строчка за что будет отвечать, чтобы у меня было больше понимания как работает JS. Огромное вам спасибо за внимание и помощь!
Ответы (2 шт):
Попробуйте так:
Добавляем в тег <body>
<body onload="start()">
в js добавляем следующее
let links;
function start() {
links = document.getElementsByClassName('topictitle');
check();
}
function check() {
const wid = document.documentElement.clientWidth;
if (wid >= 1198.5 && wid <= 1365.5) { //
for (let i = 0; i < links.length; i++) {
if (links[i].innerHTML.length > 70) {
links[i].classList.add('topictitlemin');
}
}
} else {
for (let i = 0; i < links.length; i++) {
links[i].classList.remove('topictitlemin')
}
}
}
window.onresize = () => {
check();
}
Скрипт будет срабатывать при загрузке страницы и так же при изменении размеров окна. Можно еще придумать какой нибудь флаг, что бы лишний раз не прогонять скрипты, ну например, что новый класс не добавлялся и еще раз его удалять нет смысла. Ну это уже вы сами оптимизируйте под свои потребности.
Дооптимизировал :)
<body onload="fix(topictitle)">
<script>
function fix(topictitle) {
tegi=document.getElementsByClassName(topictitle);
for(i=0;i<tegi.length;i++){
if (tegi[i].innerHTML.length > 77)
tegi[i].classList.add('topictitlemin');
}}}
</script>
@media only screen and (min-width: 1198.5px) and (max-width: 1365.5px)
.topictitle.topictitlemin {
font-size: 1em;
}