CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Farkas Imre
Farkas Imre

Reputation: 123

Text wrap to columns

I have unlimited length of text, and a fixed height container with no vertical scrollbar option, basically the text overflow the container, but it is hidden.

The requirement is to wrap this text to same height columns like the parent container, container has the option to have horizontal scrollbar.

Al this need to work in responsive layout - what means the text parent container height will be less, and all text columns will be restructured.

E.g. if the current text columns was initial 3 column on smaller devices can go to 4, or 5 column.

I searched Google, but haven't found any possible solution.

Any solution, or guide will be big help - at least to know in which direction to start

Initial has the height auto - click button to set the height/ after the height is set need to wrap the text and set in columns to not exced vertical height, instead will be horizontal aligned columns.

ADD CODE HERE

jsfiddle sample

Upvotes: 1

Views: 126

Answers (3)

Farkas Imre
Farkas Imre

Reputation: 123

Found an jquery plugin for - http://welcome.totheinter.net/columnizer-jquery-plugin/ . This one solve all what i need.

Upvotes: 0

Vinny
Vinny

Reputation: 865

You can wrap your data in another div inside the opendoc and increase its width.

<div class="opendoc"> // width fixed Change Height
      <div class="resizablediv"> // Change the width
          {{Your data}}
      </div>
</div>

Upvotes: 1

Kustolovic
Kustolovic

Reputation: 172

I have an idea, but not really perfect. Such problems always need a lots of try/fail tests…

You need to have two nested elements:

<div class="opendoc">
  <div class="opendoc-inside">
    [Content]
  </div>
</div>

.opendoc will receive a fixed height. .opendoc-inside will have columns and fixed width;

depending of your device width, you choose a number of columns, I choos 2 for the exemple;

Now with javascript:

  1. set columns 2 and width 100% on .opendoc-inside
  2. if height of .opendoc-inside is greater than height of .opendoc:
    • add 1 column and 50% to the width of .opendoc-inside
    • goto 2
  3. else your are ok

This solution generate a reflow on each test. this could become very slow. You need to avoid to launch this operation on each resize event…

Upvotes: 0

Related Questions