0

I've checked the documentation but cannot find out how to have Zurb Foundation auto-wrap text in columns like Word does, example here: http://note.io/1aunnZM

Can anyone help, please?

rassom
  • 2,896
  • 5
  • 34
  • 45

1 Answers1

3

You would need to use CSS3 Multiple Columns instead of Foundation's columns.

HTML

<div class="row">
  <div class="small-12 columns newspaper">
    ALL YOUR TEXT HERE
  </div>
</div>

CSS

.newspaper {
  column-count:2;
  -moz-column-count:2;
  -webkit-column-count:2;
}

Here's the full demo.

Brett DeWoody
  • 59,771
  • 29
  • 135
  • 184
  • Didn't know that existed. Thanks :) I am using it on a div with checkboxes that uses display-table and it wraps kinda funny. Renders like this: http://note.io/1e6m9DH HTML: http://note.io/14kilHT Any ideas how to fix that? – rassom Sep 02 '13 at 08:47
  • This answer (http://stackoverflow.com/questions/6424088/css-column-breaks) might help with that issue – Brett DeWoody Sep 02 '13 at 15:11
  • Thanks but unfortunately did not solve it; if you look at my first screenshot the "keeptogether" method still has it render like note.io/1e6m9DH where my "test" label (checkbox) is both partly present in the first and second column. Any other ideas? – rassom Sep 02 '13 at 19:36
  • I've had the same issue with images. Where the bottom part of the image wraps around to the top of the next line. I'm going to post a separate question on SO regarding this. – Brett DeWoody Sep 04 '13 at 16:05
  • Turns out there are already quite a few questions/answers around this. Sounds like wrapping the element in a `display:inline-block;` might solve it. And there are a few CSS attributes that are supposed to address it but they're not well supported. – Brett DeWoody Sep 04 '13 at 20:53
  • Thanks, Brett. I tried using inline-block for the "keeptogether" div, but that did not solve it. Removing the display: table (& table-row & table-cll) does solve the problem but they were there for a reason: to indent text nicely when label text after the checkbox is so long that it wraps to the next line. So still no solution on this end. Did you come up with one that works for you? – rassom Sep 06 '13 at 07:44
  • Could you try another method for indenting the labels. Perhaps with `text-indent`? – Brett DeWoody Sep 06 '13 at 18:32
  • Good idea :) Took a couple of hours to get it right, but it works now. Ended up with this solution: http://note.io/18FxdTV (inspired by this SO solution: http://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers) – rassom Sep 08 '13 at 12:09