Элементы Span в одну строку не переносятся в контейнер Bootstrap в браузере Chrome - PullRequest
Новая
       12

Элементы Span в одну строку не переносятся в контейнер Bootstrap в браузере Chrome

0 голосов
/ 20 сентября 2019

У меня странная проблема.Содержите несколько элементов в одной строке в контейнере Bootstrap шириной 250 пикселей.Я хочу, чтобы элементы были обернуты и заполнены в столбце 250px.ЭТО ИСПОЛЬЗУЕТСЯ, ЧТОБЫ РАБОТАТЬ В ХРОМЕ ТОЛЬКО МЕСЯЦЕВ НАЗАД, НО НЕ БОЛЬШЕ!Работает в IE, Safari, Edge.Что произошло в Chrome и как я могу заставить его снова работать в Chrome с минимальными изменениями?

Код ниже: 

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>      
    <style>
    .tag {
       height: 26px;
       width: auto;
       border: 1px solid #CAD8F3;
       background-color: #DEE7F8;
       border-radius: 6px;
       line-height: 24px;
       text-align: center;
       display:inline-block;
       padding-right: 10px;
       padding-left: 10px;
       font-family: Arial, sans-serif;
       font-size: 100%;
       color: #555555;
       margin-bottom: 3px;
       cursor: pointer;
     }
     .tag:hover {
         background-color:#b2ccf7;  
         border: 1px solid #5b7596;
     }
    </style>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <!-- CODE STYLE -->
    <!-- OBJECTIVE IS TO WRAP SPAN ITEMS WITHIN THE 250PX COLUMN WIDTH -->
    <!-- WORKS IN IE, SAFARI, EDGE, BUT NOT IN CHROME -->
    <!-- *** USED TO WORK IN CHROME *** A FEW MONTHS AGO, BUT NOW GET A LONG TAGLIST THAT FALLS OFF THE PAGE, DOES NOT WRAP WITHIN THE 250PX COLUMN -->
    <div id="side" style="width: 250px; margin-left: 50px; margin-top: 0px;">
        <div class="container" id="custom_tags_show" style="display:block;">
            <span id="tags">
                <!-- BELOW IS GENERATED BY SQL COMMAND, WOULD LIKE TO KEEP THIS FORMAT IF POSSIBLE, TO AVOID CHANGING CODE IN MANY PLACES -->
                <span class="tag tagHover" data-tag="tag">jfk&nbsp;&nbsp;<span style="font-size:70%;">(3)</span></span>&nbsp;<span class="tag tagHover" data-tag="tag">food&nbsp;&nbsp;<span style="font-size:70%;">(3)</span></span>&nbsp;<span class="tag tagHover" data-tag="tag">super-natural&nbsp;&nbsp;<span style="font-size:70%;">(3)</span></span>&nbsp;<span class="tag tagHover" data-tag="tag">booboo&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span>&nbsp;<span class="tag tagHover" data-tag="tag">e&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span>&nbsp;<span class="tag tagHover" data-tag="tag">new&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span>&nbsp;<span class="tag tagHover" data-tag="tag">asdf&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span>&nbsp;<span class="tag tagHover" data-tag="tag">huno&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span>&nbsp;<span class="tag tagHover" data-tag="tag">two&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span>&nbsp;<span class="tag tagHover" data-tag="tag">&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span>&nbsp;<span class="tag tagHover" data-tag="tag">dsfg&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span>&nbsp;<span class="tag tagHover" data-tag="tag">time&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span>&nbsp;<span class="tag tagHover" data-tag="tag">growth&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span>&nbsp;<span class="tag tagHover" data-tag="tag">contradictions&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span>&nbsp;<span class="tag tagHover" data-tag="tag">archaeology&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span>&nbsp;<span class="tag tagHover" data-tag="tag">family&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span>&nbsp;<span class="tag tagHover" data-tag="tag">hotmail&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span>&nbsp;<span class="tag tagHover" data-tag="tag">shocking&nbsp;&nbsp;<span style="font-size:70%;">(1)</span></span>&nbsp;<span class="tag tagHover" data-tag="tag">baby&nbsp;&nbsp;<span style="font-size:70%;">(1)</span></span>&nbsp;<span class="tag tagHover" data-tag="tag">big&nbsp;&nbsp;<span style="font-size:70%;">(1)</span></span>&nbsp;<span class="tag tagHover" data-tag="tag">dd&nbsp;&nbsp;<span style="font-size:70%;">(1)</span></span>&nbsp;<span class="tag tagHover" data-tag="tag">ff&nbsp;&nbsp;<span style="font-size:70%;">(1)</span></span>&nbsp;<span class="tag tagHover" data-tag="tag">four&nbsp;&nbsp;<span style="font-size:70%;">(1)</span></span>&nbsp;<span class="tag tagHover" data-tag="tag">g&nbsp;&nbsp;<span style="font-size:70%;">(1)</span></span>&nbsp;<span class="tag tagHover" data-tag="tag">job&nbsp;&nbsp;<span style="font-size:70%;">(1)</span></span>&nbsp;<span class="tag tagHover" data-tag="tag">sss&nbsp;&nbsp;<span style="font-size:70%;">(1)</span></span>&nbsp;                    
            </span>
        </div>
    </div>

    <br>
    <!-- THIS WORKS IN CHROME TO WRAP THE SPAN OBJECTS, BUT THIS IS NOT WHAT IS GENERATED BY THE SQL COMMAND AND WOULD RATHER NOT HAVE TO CHANGE CODE TO ACCOMODATE THIS -->
    <div id="side" style="width: 250px; margin-left: 50px; margin-top: 0px;">
        <div class="container" id="custom_tags_show" style="display:block;">
            <span id="tags">
                <span class="tag tagHover" data-tag="tag">jfk&nbsp;&nbsp;<span style="font-size:70%;">(3)</span></span>&nbsp;
                <span class="tag tagHover" data-tag="tag">food&nbsp;&nbsp;<span style="font-size:70%;">(3)</span></span>&nbsp;
                <span class="tag tagHover" data-tag="tag">super-natural&nbsp;&nbsp;<span style="font-size:70%;">(3)</span></span>&nbsp;
                <span class="tag tagHover" data-tag="tag">booboo&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span>&nbsp;
                <span class="tag tagHover" data-tag="tag">e&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span>&nbsp;
                <span class="tag tagHover" data-tag="tag">new&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span>&nbsp;
                <span class="tag tagHover" data-tag="tag">asdf&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span>&nbsp;
                <span class="tag tagHover" data-tag="tag">huno&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span>&nbsp;
                <span class="tag tagHover" data-tag="tag">two&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span>&nbsp;
                <span class="tag tagHover" data-tag="tag">&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span>&nbsp;
                <span class="tag tagHover" data-tag="tag">dsfg&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span>&nbsp;
                <span class="tag tagHover" data-tag="tag">time&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span>&nbsp;
                <span class="tag tagHover" data-tag="tag">growth&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span>&nbsp;
                <span class="tag tagHover" data-tag="tag">contradictions&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span>&nbsp;
                <span class="tag tagHover" data-tag="tag">archaeology&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span>&nbsp;
                <span class="tag tagHover" data-tag="tag">family&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span>&nbsp;
                <span class="tag tagHover" data-tag="tag">hotmail&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span>&nbsp;
                <span class="tag tagHover" data-tag="tag">shocking&nbsp;&nbsp;<span style="font-size:70%;">(1)</span></span>&nbsp;
                <span class="tag tagHover" data-tag="tag">baby&nbsp;&nbsp;<span style="font-size:70%;">(1)</span></span>&nbsp;
                <span class="tag tagHover" data-tag="tag">big&nbsp;&nbsp;<span style="font-size:70%;">(1)</span></span>&nbsp;
                <span class="tag tagHover" data-tag="tag">dd&nbsp;&nbsp;<span style="font-size:70%;">(1)</span></span>&nbsp;
                <span class="tag tagHover" data-tag="tag">ff&nbsp;&nbsp;<span style="font-size:70%;">(1)</span></span>&nbsp;
                <span class="tag tagHover" data-tag="tag">four&nbsp;&nbsp;<span style="font-size:70%;">(1)</span></span>&nbsp;
                <span class="tag tagHover" data-tag="tag">g&nbsp;&nbsp;<span style="font-size:70%;">(1)</span></span>&nbsp;
                <span class="tag tagHover" data-tag="tag">job&nbsp;&nbsp;<span style="font-size:70%;">(1)</span></span>&nbsp;
                <span class="tag tagHover" data-tag="tag">sss&nbsp;&nbsp;<span style="font-size:70%;">(1)</span></span>&nbsp;                    
            </span>
        </div>
    </div>

  </body>
</html>

Ответы [ 2 ]

0 голосов
/ 21 сентября 2019

Я обнаружил, что в Chrome обертка работала, когда я удалял в конце каждого элемента тега:

ОРИГИНАЛЬНЫЙ ЭЛЕМЕНТ ТЕГА: 

<span class="tag tagHover" data-tag="tag">jfk&nbsp;&nbsp;<span style="font-size:70%;">(3)</span></span>&nbsp;

ЭЛЕМЕНТ ТЕГА С &nbsp;, удаленный изконец 

<span class="tag tagHover" data-tag="tag">jfk&nbsp;&nbsp;<span style="font-size:70%;">(3)</span></span>

ПОЛНАЯ ЛИНИЯ TAGS, КОТОРЫЕ РАБОТАЮТ С ХРОМОВОЙ ОБРАБОТКОЙ, ТОГДА: 

<span class="tag tagHover" data-tag="tag">jfk&nbsp;&nbsp;<span style="font-size:70%;">(3)</span></span><span class="tag tagHover" data-tag="tag">food&nbsp;&nbsp;<span style="font-size:70%;">(3)</span></span><span class="tag tagHover" data-tag="tag">super-natural&nbsp;&nbsp;<span style="font-size:70%;">(3)</span></span><span class="tag tagHover" data-tag="tag">booboo&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">e&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">new&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">asdf&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">huno&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">two&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">dsfg&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">time&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">growth&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">contradictions&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">archaeology&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">family&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">hotmail&nbsp;&nbsp;<span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">shocking&nbsp;&nbsp;<span style="font-size:70%;">(1)</span></span><span class="tag tagHover" data-tag="tag">baby&nbsp;&nbsp;<span style="font-size:70%;">(1)</span></span><span class="tag tagHover" data-tag="tag">big&nbsp;&nbsp;<span style="font-size:70%;">(1)</span></span><span class="tag tagHover" data-tag="tag">dd&nbsp;&nbsp;<span style="font-size:70%;">(1)</span></span><span class="tag tagHover" data-tag="tag">ff&nbsp;&nbsp;<span style="font-size:70%;">(1)</span></span><span class="tag tagHover" data-tag="tag">four&nbsp;&nbsp;<span style="font-size:70%;">(1)</span></span><span class="tag tagHover" data-tag="tag">g&nbsp;&nbsp;<span style="font-size:70%;">(1)</span></span><span class="tag tagHover" data-tag="tag">job&nbsp;&nbsp;<span style="font-size:70%;">(1)</span></span><span class="tag tagHover" data-tag="tag">sss&nbsp;&nbsp;<span style="font-size:70%;">(1)</span></span>

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

Не уверен, почему Chrome реагирует на &nbsp; в этой позиции иначе, чем в других браузерах (отлично переносится), но это то, что я нашел.

0 голосов
/ 20 сентября 2019

Вы должны использовать flexbox для того же.Дополнительная информация здесь: -

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

Добавьте этот фрагмент к своему коду: - 

#tags{
        display: flex;
        flex-wrap: wrap;
     }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...