css3 - Multicolumn CSS doesn't break properly -

i have css multicolumn: fine in firefox (<ul> content not 'broken') not on chrome (some items should on first column splitted second). looking around found this solution, doesn't seem work anywhere place code.

here full snippet:

.margin-bottom-0 { margin-bottom: 0; }  .double > ul {    columns: 2;    padding: 0;  }  .double > ul ul {    padding-left: 10px;    list-style: circle;  }  .double > ul ul li {    padding-left: 5px;  }  .double li {    overflow: hidden;    white-space: nowrap;    text-overflow: ellipsis;    list-style-position: inside;  }

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">    <div class="container">    <div class="row">      <div class="col-xs-8">        <div class="double">          <ul class="list-unstyled margin-bottom-0">            <li><a href="#">area docenti</a>              <ul>                <li><a href="#">docenti e classi</a></li>              </ul>            </li>            <li><a href="#">area segreteria</a>              <ul>                <li><a href="#">organigramma</a></li>                <li><a href="#">d. s. g. a.</a></li>                <li><a href="#">u. r. p.</a></li>                <li><a href="#">comunicazioni interne personale ata</a></li>                <li><a href="#">programma annuale</a></li>                <li><a href="#">modulistica</a></li>                <li><a href="#">sidi - miur</a></li>              </ul>            </li>            <li><a href="#">area genitori</a>              <ul>                <li><a href="#">rappresentanti dei genitori</a></li>                <li><a href="#">ricevimento docenti</a></li>                <li><a href="#">patto di corresponsabilità</a></li>                <li><a href="#">libri di testo</a></li>                <li><a href="#">siti tematici</a></li>                <li><a href="#">iscrizioni on line</a></li>              </ul>            </li>            <li><a href="#">area alunni</a>                <ul>                    <li><a href="#">viaggi di istruzione</a></li>                    <li><a href="#">materiale didattico</a></li>                    <li><a href="#">concorsi</a></li>                    <li><a href="#">visite guidate</a></li>                    <li><a href="#">attività e progetti</a></li>                </ul>            </li>            <li><a href="#m">il dirigente</a></li>            <li><a href="#">organi collegiali</a></li>            <li><a href="#">piano di lavoro</a>              <ul>                <li><a href="#">pof</a></li>                <li><a href="#">ptof</a></li>                <li><a href="#">pon</a></li>              </ul>            </li>          </ul>        </div>      </div>    </div>  </div>

you see, "siti tematici" , "iscrizione on line" should on first column, right after "libri di testo" (they part of same <ul>): instead, go on second column.

looking further discovered overflow: hidden; (that need ellipsis) what's causing correct behavior in firefox , wrong 1 on chrome: if remove line, both firefox , chrome show (wrong) 'broken' <ul>, @ least consistent...

any idea have columns broken in right way mantaining ellipsis, please?

you should use break-inside:avoid on li

see more here > break inside

and code snippet below :

.margin-bottom-0 {    margin-bottom: 0;  }    .double >ul {    columns: 2;    padding: 0;  }    .double > ul ul {    padding-left: 10px;    list-style: circle;  }    .double > ul ul li {    padding-left: 5px;  }    .double li {    overflow: hidden;    white-space: nowrap;    text-overflow: ellipsis;    list-style-position: inside;    -webkit-column-break-inside: avoid;    /* chrome, safari, opera */    page-break-inside: avoid;    /* firefox */    break-inside: avoid;    /* ie 10+ */  }

<div class="container">    <div class="row">      <div class="col-xs-8">        <div class="double">          <ul class="list-unstyled margin-bottom-0">            <li><a href="#">area docenti</a>              <ul>                <li><a href="#">docenti e classi</a></li>              </ul>            </li>            <li><a href="#">area segreteria</a>              <ul>                <li><a href="#">organigramma</a></li>                <li><a href="#">d. s. g. a.</a></li>                <li><a href="#">u. r. p.</a></li>                <li><a href="#">comunicazioni interne personale ata</a></li>                <li><a href="#">programma annuale</a></li>                <li><a href="#">modulistica</a></li>                <li><a href="#">sidi - miur</a></li>              </ul>            </li>            <li><a href="#">area genitori</a>              <ul>                <li><a href="#">rappresentanti dei genitori</a></li>                <li><a href="#">ricevimento docenti</a></li>                <li><a href="#">patto di corresponsabilità</a></li>                <li><a href="#">libri di testo</a></li>                <li><a href="#">siti tematici</a></li>                <li><a href="#">iscrizioni on line</a></li>              </ul>            </li>            <li><a href="#">area alunni</a>              <ul>                <li><a href="#">viaggi di istruzione</a></li>                <li><a href="#">materiale didattico</a></li>                <li><a href="#">concorsi</a></li>                <li><a href="#">visite guidate</a></li>                <li><a href="#">attività e progetti</a></li>              </ul>            </li>            <li><a href="#m">il dirigente</a></li>            <li><a href="#">organi collegiali</a></li>            <li><a href="#">piano di lavoro</a>              <ul>                <li><a href="#">pof</a></li>                <li><a href="#">ptof</a></li>                <li><a href="#">pon</a></li>              </ul>            </li>          </ul>        </div>      </div>    </div>  </div>