| alisamii |
11-06-2012 06:25 PM |
Controlling `<li>` breaks in a multi-column layout
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:
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:
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</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. |
