CODEWITHSUNDEEP
csshtml-listscss-multicolumn-layout
Ivan
Ivan

Reputation: 2481

Multicolumn CSS doesn't break properly

I have a CSS multicolumn: it is fine in Firefox (<ul> content is not 'broken') but not on Chrome (some items that should be on first column are splitted into second). Looking around I found this solution, but it doesn't seem to work anywhere I place the code.

Here is a 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" and "Iscrizione On Line" should be on the first column, right after "Libri di testo" (they are part of the same <ul>): instead, they go on the second column.

Looking further I discovered that overflow: hidden; (that I need for ellipsis) is what's causing the correct behavior in Firefox and the wrong one on Chrome: if I remove that line, both Firefox and Chrome show the (wrong) 'broken' <ul>, but at least they are consistent...

Any idea to have the columns broken in the right way mantaining the ellipsis, please?

Upvotes: 0

Views: 71

Answers (1)

Mihai T
Mihai T

Reputation: 17687

You should use break-inside:avoid on the 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>

Upvotes: 1

Related Questions