line-height = 1.5em

Bonjour,

j'ai crée ce code :

https://jsfiddle.net/c2o01g9h/

Si on modifie height ou font-size dans le css, ça fonctionne toujours. Mais si je modifie la propriété line-height, à 1.2 ou 1.3 par exemple, mes lignes du haut ou du bas se retrouvent coupées. Pourriez-vous m'ader à résoudre ce problème, SVP?

Merci beaucoup.

HTML :

Code:

1
2
3
4
5
6
7
8
9
10
<input id="pagePrecedente" type="button" onclick="$();" value="Precedent" />
 <input id="pageSuivante" type="button" onclick="$();" value="Suivant" />
 <div id="myText"> 
 
Proinde die funestis interrogationibus praestituto imaginarius iudex equitum resedit magister adhibitis aliis iam quae essent agenda praedoctis, et adsistebant hinc inde notarii, quid quaesitum esset, quidve responsum, cursim ad Caesarem perferentes, cuius imperio truci, stimulis reginae exsertantis aurem subinde per aulaeum, nec diluere obiecta permissi nec defensi periere conplures.
 
Inter quos Paulus eminebat notarius ortus in Hispania, glabro quidam sub vultu latens, odorandi vias periculorum occultas perquam sagax. is in Brittanniam missus ut militares quosdam perduceret ausos conspirasse Magnentio, cum reniti non possent, iussa licentius supergressus fluminis modo fortunis conplurium sese repentinus infudit et ferebatur per strages multiplices ac ruinas, vinculis membra ingenuorum adfligens et quosdam obterens manicis, crimina scilicet multa consarcinando a veritate longe discreta. unde admissum est facinus impium, quod Constanti tempus nota inusserat sempiterna.
 
Paphius quin etiam et Cornelius senatores, ambo venenorum artibus pravis se polluisse confessi, eodem pronuntiante Maximino sunt interfecti. pari sorte etiam procurator monetae extinctus est. Sericum enim et Asbolium supra dictos, quoniam cum hortaretur passim nominare, quos vellent, adiecta religione firmarat, nullum igni vel ferro se puniri iussurum, plumbi validis ictibus interemit. et post hoe flammis Campensem aruspicem dedit, in negotio eius nullo sacramento constrictus.Paphius quin etiam et Cornelius senatores, ambo venenorum artibus pravis se polluisse confessi, eodem pronuntiante Maximino sunt interfecti. pari sorte etiam procurator monetae extinctus est. Sericum enim et Asbolium supra dictos, quoniam cum hortaretur passim nominare, quos vellent, adiecta religione firmarat, nullum igni vel ferro se puniri iussurum, plumbi validis ictibus interemit. et post hoe flammis Campensem aruspicem dedit, in negotio eius nullo sacramento constrictus.Paphius quin etiam et Cornelius senatores, ambo venenorum artibus pravis se polluisse confessi, eodem pronuntiante Maximino sunt interfecti. pari sorte etiam procurator monetae extinctus est. Sericum enim et Asbolium supra dictos, quoniam cum hortaretur passim nominare, quos vellent, adiecta religione firmarat, nullum igni vel ferro se puniri iussurum, plumbi validis ictibus interemit. et post hoe flammis Campensem aruspicem dedit, in negotio eius nullo sacramento constrictus.
    </div>

CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#myText {
    margin:0;
    padding:0;
    border:0;
    top:40;
    left:0;
    max-width: 260px;
    height:346px;
    background:yellow;
    word-wrap: break-word;
    font-size: 12px;
    line-height: 1.5em;
    overflow: hidden;
}

Jquery :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 var myHeight = $('#myText').height();
var hauteurLines =  parseInt($('#myText').css('line-height'));     
var numberLines =  myHeight / hauteurLines;
numberLines=Math.floor(numberLines);
var myNewHeight = numberLines*hauteurLines;
$("#myText").css({'height': myNewHeight+'px', });
 
 
 $("#pageSuivante").on("click", function () {  
$("#myText").animate({scrollTop:"+="+myNewHeight+"px"},0);
 }); 
 
  $("#pagePrecedente").on("click", function () { 
$("#myText").animate({scrollTop:"-="+myNewHeight+"px"},0);
 });

Un petit exposé sur le line-height http://slides.iamvdo.me/kiwiparty14/#/

Merci pour le lien, mais il ne m'a pas permis de solutionner mon problème pour le moment. :cry:

J'ai trouvé la solution qui consiste à figer le line-height avant d'ajuster la taille de la div :

https://jsfiddle.net/0k7e1so2/

Vous pouvez modifier le font-size ou le line-height dans le CSS, les lignes ne seront plus coupées. :bravo: