0

Постараюсь быть краток и изложить всю суть проблемы: Во-первых, насколько я понял данную задачу реализовать с помощью html+css невозможно, и нужно будет прибегнуть к JS. У меня есть форум в котором заголовки на некоторой ширине занимают более двух строк, что для меня это выглядит совершенно неприемлемо.

Форум с заголовками

<div class="list-inner">                                                                                                            

<a class="unread" href="./viewtopic.php?t=10&amp;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, хотелось бы получить помощь в написании скрипта, который будет уменьшать шрифт и учитывать следующие условия:

  1. Применяться скрипт будет на заданной ширине min-width:1198.5px and max-width:1365.5px.
  2. Если количество символов в заголовке больше 70, то данный заголовок получает новый класс, условно "topictitlemin", которому задается параметр font-size: 1em;

Если не сложно, распишите как можно подробнее, что как и куда, и где какая строчка за что будет отвечать, чтобы у меня было больше понимания как работает JS. Огромное вам спасибо за внимание и помощь!

4
  • Каким образом вы получаете заголовок и рендерите его к себе в HTML?
    – SwaD
    Commented 24 сент. 2022 в 17:39
  • Как это может помочь? в php на движке phpbb как-то рендерится в тэг который прописывается в хтмл, <!-- IF topicrow.U_VIEW_TOPIC --><a href="{topicrow.U_VIEW_TOPIC}" class="topictitle">{topicrow.TOPIC_TITLE}</a><!-- ELSE -->{topicrow.TOPIC_TITLE}<!-- ENDIF --> не знаю зачем тебе это, но держи) Commented 25 сент. 2022 в 8:30
  • Т.е. страница полностью рендерится на сервере? Если так, то почему не сделать это силами PHP? Можно конечно и на клиенте это сделать силами JS.
    – SwaD
    Commented 25 сент. 2022 в 12:24
  • потому что php я знаю и понимаю ещё меньше чем js, в котором я также ничего не знаю и не понимаю :D Commented 25 сент. 2022 в 12:59

2 ответа 2

1

Попробуйте так: Добавляем в тег <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();
  }

Скрипт будет срабатывать при загрузке страницы и так же при изменении размеров окна. Можно еще придумать какой нибудь флаг, что бы лишний раз не прогонять скрипты, ну например, что новый класс не добавлялся и еще раз его удалять нет смысла. Ну это уже вы сами оптимизируйте под свои потребности.

1
  • Вариант хороший, ввиду того что долго не получал ответа, попытался решить своими силами тоже Commented 25 сент. 2022 в 15:14
0

Дооптимизировал :)

<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;
}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.