Удалить тег из html

278

12 июля 2017, 23:05

Есть блок с текстом, в котором в некоторых местах есть br. При меньшей ширине окна текст принимает непрезентабельный вид и не выравнивается с text-align по ширине блока. Может есть способ, чтобы при определенной ширине окна, теги br удалялись из блока?

Answer 1

Вот, например, так можно скрывать теги "br" только для определенного радиуса ширины экрана. В примере для 750px и меньше теги убираются из блока с классом "parent-block". Для работы скрипта необходим jQuery

var w = screen.width;
function forMobile() {
    w = screen.width;
    if (w <= 750) {
        $('.parent-block').find('br').css('display', 'none');
    } else {
        $('.parent-block').find('br').css('display', 'block');
    }
}
forMobile();
$( window ).resize(function() {
    forMobile();
});

Вот css

@media screen and (max-width: 750px) {
   .parent-block br {
      display: none;
   }
}

Привык создавать плагины на js, которые делают порою нечто подобное, вот и пример с ним. И js скрипт и css делают одно и то же действие.

Answer 2

Media Queries вам помогут в этом деле:

@media only screen and (max-width: 500px) { 
  br { 
    display: none; 
  } 
  .text { 
    text-align:justify; 
  } 
}

<div class="text"> 
  Lorem ipsum dolor sit amet, consectetur<br />adipiscing elit, sed do eiusmod tempor incididunt ut labore et<br />dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris<br />nisi ut aliquip ex ea commodo consequat.<br 
  />Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,<br />sunt in culpa qui officia deserunt mollit anim id<br />est laborum. Sed ut perspiciatis, unde 
  omnis iste natus error sit voluptatem<br />accusantium doloremque laudantium, totam<br />rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam<br />voluptatem, quia voluptas 
  sit, aspernatur aut odit aut fugit,<br />sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor<br />sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi 
  tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. 
</div>