Controlling `<li>` breaks in a multi-column layout

[alisamii]

I am having trouble with managing how text-based content breaks in a multi-column, multi-page layout.

I am using the textify.js jQuery plugin available on CodeCanyon.

The problem I am having relates to lists. Sometimes, list items break incorrectly.

For example, a list may contain the following code:

<ul>
	<li>Vous raccommoder avec votre conjoint après avoir exprimé clairement vos attentes de changement, en surmontant vos différends.</li>
	<li>Consulter un tiers autorisé (psychologue, conseiller familial, prêtre) à titre individuel pour faire le point sur votre situation personnelle.</li>
	<li>Consulter un conseiller/médiateur familial avec votre conjoint.</li>
	<li>Vous séparer de fait (sans requérir l'intervention d'un juge, et avec ou sans une convention écrite avec votre conjoint).</li>
	<li>Requérir du juge des mesures protectrices de l'union conjugale  (en demandant ou non  l'attribution du logement familial, c'est-à-dire en menant ou non une vie séparée).</li>
	<li>À noter que requérir des mesures protectrices de l'union conjugale pour organiser la vie séparée peut-être un moyen de préparer un divorce unilatéral si le conjoint refuse de divorcer.</li>
	<li>Si les conditions en sont réalisées, introduire une action en séparation de corps (cas échéant d'accord avec votre conjoint).</li>
</ul>

The columns are set to a height of 330px.

In this layout, some of the list items break mid-item and are continued on the next column. That isn't a real problem, if the result was not a new list item being started when that happens.

Effectively, it breaks and creates a new `<li>` as such:

<ul>
	<li>Vous raccommoder avec votre conjoint après avoir exprimé clairement vos attentes de changement, en surmontant vos différends.</li>
	<li>Consulter un tiers autorisé (psychologue, conseiller familial, prêtre) à titre individuel pour faire le point sur votre situation personnelle.</li>
	<li>Consulter un conseiller/médiateur familial avec votre conjoint.</li>
	<li>Vous séparer de fait (sans requérir l'intervention d'un</li>
	<li>juge, et avec ou sans une convention écrite avec votre conjoint).</li>
	<li>Requérir du juge des mesures protectrices de l'union conjugale  (en demandant ou non  l'attribution du logement familial, c'est-à-dire en menant ou non une vie séparée).</li>
	<li>À noter que requérir des mesures protectrices de l'union conjugale pour organiser la vie séparée peut-être un moyen de préparer un divorce unilatéral si le conjoint refuse de divorcer.</li>
	<li>Si les conditions en sont réalisées, introduire une action en séparation de corps (cas échéant d'accord avec votre conjoint).</li>
</ul>

If you notice, the 7 `<li>` elements are now 8 with a new `<li>` created mid-sentence after **l'intervention d'un** of list item 4.

What I'd like to do is control that. Either of the following options would be satisfactory to me:

1. The line breaks to the next column but does not create a new `<li>`
2. The column height grows only enough to allow the `<li>` not to break onto a new column.
3. The `<li>` does not break mid-sentence, but rather if it is too long to display in the column, it breaks before the `<li>`

You can see the layout issue and problems at the following URL:

http://alisamii.dyndns.org/ergonomiq...clients/sosd2/

Any assistance would be most appreciated.

[Paul O'B]

Hi,

This is a jquery question as CSS is not capable of making those changes so I will move the thread to JS/Jquery.

It won't be an easy one to answer because it will mean rewriting that application as the way it works is that it splits the line into new tags at the required point rather than searching to the end of the tag. I guess it was done this way because some paragraphs may be hundreds of lines long and breaking at the end of a paragraph would make the effect impossible.

[paul_wilkins]

The Textify plugin is a product that needs to be paid for, and there doesn't seem to be any documentation for non-paying customers that we can use to learn how it's supposed to work for the purpose that you're attempting to use it for.

Please go to their Forum for troubleshooting and discussion relating to the products from Code Canyon - http://codecanyon.net/forums/topic/item-discussion/66