Application d'un ellipse à un texte multiligne
Existe-t-il une solution pour ajouter des ellipses sur la dernière ligne à l'intérieur d'un div avec une hauteur de liquide (20%)?
J'ai trouvé la fonction -webkit-line-clamp en CSS, mais dans mon cas, le numéro de ligne dépendra de la taille de la fenêtre.
p {
width:100%;
height:20%;
background:red;
position:absolute;
}<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendreritLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendrerit.</p>J'ai ce JSFiddle pour illustrer le problème. https://jsfiddle.net/96knodm6/
J'ai enfin trouvé une solution pour faire ce que je veux. En tant que p un paragraphe et article le wrapper. Si vous voulez appliquer Ellipsis à p en fonction de la hauteur article (qui dépend également de la hauteur de la fenêtre), vous devez obtenir la height de la article, le line-height de la p et ensuite le articleHeight/lineHeight pour trouver le nombre de line-clamp qui peut être ajouté dynamiquement alors.
La seule chose à faire est que le line-height devrait être déclaré dans le fichier css.
Vérifiez le code suivant. Si vous changez la hauteur de la fenêtre, le line-clamp changera. Peut être génial de créer un plug-in visant à le faire.
function lineclamp() {
var lineheight = parseFloat($('p').css('line-height'));
var articleheight = $('article').height();
var calc = parseInt(articleheight/lineheight);
$("p").css({"-webkit-line-clamp": "" + calc + ""});
}
$(document).ready(function() {
lineclamp();
});
$( window ).resize(function() {
lineclamp();
});article {
height:60%;
background:red;
position:absolute;
}
p {
margin:0;
line-height:120%;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: Ellipsis;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lorem ligula, lacinia a justo sed, porttitor vulputate risus. In non feugiat risus. Sed vitae urna nisl. Duis suscipit volutpat sollicitudin. Donec ac massa elementum massa condimentum mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla sollicitudin sapien at enim sodales dapibus. Pellentesque sed nisl eu sem aliquam tempus nec ut leo. Quisque rutrum nulla nec aliquam placerat. Fusce a massa ut sem egestas imperdiet. Sed sollicitudin id dolor egestas malesuada. Quisque placerat lobortis ante, id ultrices ipsum hendrerit nec. Quisque quis ultrices erat.Nulla gravida ipsum nec sapien pellentesque pharetra. Suspendisse egestas aliquam nunc vel egestas. Nullam scelerisque purus interdum lectus consectetur mattis. Aliquam nunc erat, accumsan ut posuere eu, vehicula consequat ipsum. Fusce vel ex quis sem tristique imperdiet vel in mi. Cras leo orci, fermentum vitae volutpat vitae, convallis semper libero. Phasellus a volutpat diam. Ut pulvinar purus felis, eu vehicula enim aliquet vitae. Suspendisse quis lorem facilisis ante interdum euismod et vitae risus. Vestibulum varius nulla et enim malesuada fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lorem ligula, lacinia a justo sed, porttitor vulputate risus. In non feugiat risus. Sed vitae urna nisl. Duis suscipit volutpat sollicitudin. Donec ac massa elementum massa condimentum mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla sollicitudin sapien at enim sodales dapibus. Pellentesque sed nisl eu sem aliquam tempus nec ut leo. Quisque rutrum nulla nec aliquam placerat. Fusce a massa ut sem egestas imperdiet. Sed sollicitudin id dolor egestas malesuada. Quisque placerat lobortis ante, id ultrices ipsum hendrerit nec.</p></article>Si vous souhaitez appliquer des ellipses (...) à une seule ligne de texte, CSS facilite cela avec la propriété text-overflow . C'est toujours un peu délicat (à cause de toutes les exigences - voir ci-dessous), mais text-overflow le rend possible et fiable.
Si, toutefois, vous voulez utiliser Ellipsis sur multiline text - comme ce serait le cas ici - alors ne vous attendez pas à vous amuser. CSS n'a pas de méthode standard pour cela, et les solutions de contournement sont aléatoires.
Ellipsis pour texte sur une seule ligne
Avec text-overflow, les ellipses peuvent être appliqués à une seule ligne de texte. Les exigences CSS suivantes doivent être remplies:
- doit avoir une
width,max-widthouflex-basis - doit avoir
white-space: nowrap - doit avoir
overflowavec une valeur autre quevisible - doit être
display: blockouinline-block.__ (ou son équivalent fonctionnel, tel qu'un élément flexible).
Donc cela fonctionnera:
p {
width: 200px;
white-space: nowrap;
overflow: hidden;
display: inline-block;
text-overflow: Ellipsis;
border: 1px solid #ddd;
margin: 0;
}<p>
This is a test of CSS <i>text-overflow: Ellipsis</i>.
This is a test of CSS <i>text-overflow: Ellipsis</i>.
This is a test of CSS <i>text-overflow: Ellipsis</i>.
This is a test of CSS <i>text-overflow: Ellipsis</i>.
This is a test of CSS <i>text-overflow: Ellipsis</i>.
This is a test of CSS <i>text-overflow: Ellipsis</i>.
</p>MAIS, essayez de supprimer width, ou en laissant overflow à visible, ou en supprimant white-space: nowrap ou en utilisant autre chose qu'un élément de conteneur de bloc, ET, Ellipsis échoue lamentablement.
Un gros avantage ici: text-overflow: Ellipsis n'a aucun effet sur le texte multiligne. (La seule exigence white-space: nowrap élimine cette possibilité.)
p {
width: 200px;
/* white-space: nowrap; */
height: 90px; /* new */
overflow: hidden;
display: inline-block;
text-overflow: Ellipsis;
border: 1px solid #ddd;
margin: 0;
}<p>
This is a test of CSS <i>text-overflow: Ellipsis</i>.
This is a test of CSS <i>text-overflow: Ellipsis</i>.
This is a test of CSS <i>text-overflow: Ellipsis</i>.
This is a test of CSS <i>text-overflow: Ellipsis</i>.
This is a test of CSS <i>text-overflow: Ellipsis</i>.
This is a test of CSS <i>text-overflow: Ellipsis</i>.
</p>Ellipsis pour texte multiligne
Comme CSS n'a pas de propriété pour Ellipsis sur un texte multiligne, différentes solutions de contournement ont été créées. Plusieurs de ces méthodes peuvent être trouvées ici:
Ce man a la meilleure solution. Seulement css:
.multiline-Ellipsis {
display: block;
display: -webkit-box;
max-width: 400px;
height: 109.2px;
margin: 0 auto;
font-size: 26px;
line-height: 1.4;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: Ellipsis;
}
Il suffit d'augmenter le -webkit-line-clamp: 4; pour augmenter le nombre de lignes
p {
display: block;
display: -webkit-box;
max-width: 200px;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: Ellipsis;
}<p>Lorem ipsum dolor sit amet, novum menandri adversarium ad vim, ad his persius nostrud conclusionemque. Ne qui atomorum pericula honestatis. Te usu quaeque detracto, idque nulla pro ne, ponderum invidunt eu duo. Vel velit tincidunt in, nulla bonorum id eam, vix ad fastidii consequat definitionem.</p>Modifier le 02/05/2018
Line clamp est un CSS (webkit) propriétaire et non documenté: https://caniuse.com/#feat=css-line-clamp , de sorte qu’il ne fonctionne actuellement que sur quelques navigateurs.
Je viens de jouer un peu avec ce concept. En gros, si vous êtes d'accord avec potentiellement avoir un pixel ou si coupé de votre dernier caractère, voici une solution pure css et html:
Cela fonctionne en positionnant absolument une div en dessous de la zone visible d'une fenêtre. Nous voulons que la division soit compensée dans la zone visible à mesure que notre contenu grandit. Si le contenu augmente trop, notre div sera compensé trop haut, donc la limite supérieure de la hauteur de notre contenu peut croître.
HTML:
<div class="text-container">
<span class="text-content">
PUT YOUR TEXT HERE
<div class="Ellipsis">...</div> // You could even make this a pseudo-element
</span>
</div>
CSS:
.text-container {
position: relative;
display: block;
color: #838485;
width: 24em;
height: calc(2em + 5px); // This is the max height you want to show of the text. A little extra space is for characters that extend below the line like 'j'
overflow: hidden;
white-space: normal;
}
.text-content {
Word-break: break-all;
position: relative;
display: block;
max-height: 3em; // This prevents the Ellipsis element from being offset too much. It should be 1 line height greater than the viewport
}
.Ellipsis {
position: absolute;
right: 0;
top: calc(4em + 2px - 100%); // Offset grows inversely with content height. Initially extends below the viewport, as content grows it offsets up, and reaches a maximum due to max-height of the content
text-align: left;
background: white;
}
J'ai testé cela dans Chrome, FF, Safari et IE 11.
Vous pouvez le vérifier ici: http://codepen.io/puopg/pen/vKWJwK
Vous pourrez peut-être même alléger le caractère brutal du personnage grâce à la magie CSS.
EDIT: Je suppose qu’une des choses que cela impose est Word-break: casser-tout, sinon le contenu ne s’étendrait pas jusqu’à la toute fin de la fenêtre. :(
Malheureusement non avec l'état actuel des choses en CSS.
Le rendu des ellipsis a une condition préalable white-space:nowrap qui signifie: Les ellipsis sont dessinés uniquement sur des conteneurs de texte à une ligne.
p {
width:100%;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
background:#fff;
position:absolute;
}<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendreritLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendrerit.</p>utiliser cette formule:
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; //put number of line here
Je suis venu avec ma propre solution pour cela:
/*this JS code puts the Ellipsis (...) at the end of multiline Ellipsis elements
*
* to use the multiline Ellipsis on an element give it the following CSS properties
* line-height:xxx
* height:xxx (must line-height * number of wanted lines)
* overflow:hidden
*
* and have the class js_Ellipsis
* */
//do all Ellipsis when jQuery loads
jQuery(document).ready(function($) {put_ellipsisses();});
//redo Ellipsis when window resizes
var re_Ellipsis_timeout;
jQuery( window ).resize(function() {
//timeout mechanism prevents from chain calling the function on resize
clearTimeout(re_Ellipsis_timeout);
re_Ellipsis_timeout = setTimeout(function(){ console.log("re_Ellipsis_timeout finishes"); put_ellipsisses(); }, 500);
});
//the main function
function put_ellipsisses(){
jQuery(".js_Ellipsis").each(function(){
//remember initial text to be able to regrow when space increases
var object_data=jQuery(this).data();
if(typeof object_data.oldtext != "undefined"){
jQuery(this).text(object_data.oldtext);
}else{
object_data.oldtext = jQuery(this).text();
jQuery(this).data(object_data);
}
//truncate and Ellipsis
var clientHeight = this.clientHeight;
var maxturns=100; var countturns=0;
while (this.scrollHeight > clientHeight && countturns < maxturns) {
countturns++;
jQuery(this).text(function (index, text) {
return text.replace(/\W*\s(\S)*$/, '...');
});
}
});
}
You can achieve this by a few lines of CSS and JS.
CSS:
div.clip-context {
max-height: 95px;
Word-break: break-all;
white-space: normal;
Word-wrap: break-Word; //Breaking unicode line for MS-Edge works with this property;
}
JS:
$(document).ready(function(){
for(let c of $("div.clip-context")){
//If each of element content exceeds 95px its css height, extract some first
//lines by specifying first length of its text content.
if($(c).innerHeight() >= 95){
//Define text length for extracting, here 170.
$(c).text($(c).text().substr(0, 170));
$(c).append(" ...");
}
}
});
HTML:
<div class="clip-context">
(Here some text)
</div>
Peut-être que cela peut vous aider les gars. Ellipses multilignes avec info-bulle en survol . https://codepen.io/Anugraha123/pen/WOBdOb
<div>
<p class="cards-values">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquet lorem commodo, semper mauris nec, suscipit nisi. Nullam laoreet massa sit amet leo malesuada imperdiet eu a augue. Sed ac diam quis ante congue volutpat non vitae sem. Vivamus a felis id dui aliquam tempus
</p>
<span class="tooltip"></span>
</div>
<!DOCTYPE html>
<html>
<head>
<style>
/* styles for '...' */
.block-with-text {
width: 50px;
height: 50px;
/* hide text if it more than N lines */
overflow: hidden;
/* for set '...' in absolute position */
position: relative;
/* use this value to count block height */
line-height: 1.2em;
/* max-height = line-height (1.2) * lines max number (3) */
max-height: 3.6em;
/* fix problem when last visible Word doesn't adjoin right side */
text-align: justify;
/* place for '...' */
margin-right: -1em;
padding-right: 1em;
}
/* create the ... */
.block-with-text:before {
/* points in the end */
content: '...';
/* absolute position */
position: absolute;
/* set position to right bottom corner of block */
right: 0;
bottom: 0;
}
/* hide ... if we have text, which is less than or equal to max lines */
.block-with-text:after {
/* points in the end */
content: '';
/* absolute position */
position: absolute;
/* set position to right bottom corner of text */
right: 0;
/* set width and height */
width: 1em;
height: 1em;
margin-top: 0.2em;
/* bg color = bg color under block */
background: white;
}
</style>
</head>
<body>
a
<div class="block-with-text">g fdsfkjsndasdasd asd asd asdf asdf asdf asdfas dfa sdf asdflk jgnsdlfkgj nsldkfgjnsldkfjgn sldkfjgnls dkfjgns ldkfjgn sldkfjngl sdkfjngls dkfjnglsdfkjng lsdkfjgn sdfgsd</div>
<p>This is a paragraph.</p>
</body>
</html>
J'ai jeté un œil à la façon dont YouTube résout le problème sur leur page d'accueil et je l'ai simplifié:
.multine-Ellipsis {
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: Ellipsis;
white-space: normal;
}
Cela permettra 2 lignes de code et ensuite ajouter un Ellipsis.
Gist: https://Gist.github.com/eddybrando/386d3350c0b794ea87a2082bf4ab014b
Après plusieurs essais, j’ai finalement obtenu un mélange de js/css pour gérer les débordements multilignes et à une ligne.
Code CSS3:
.forcewrap { // single line Ellipsis
-ms-text-overflow: Ellipsis;
-o-text-overflow: Ellipsis;
text-overflow: Ellipsis;
overflow: hidden;
-moz-binding: url( 'bindings.xml#Ellipsis' );
white-space: nowrap;
display: block;
max-width: 95%; // spare space for Ellipsis
}
.forcewrap.multiline {
line-height: 1.2em; // my line spacing
max-height: 3.6em; // 3 lines
white-space: normal;
}
.manual-Ellipsis:after {
content: "\02026"; // '...'
position: absolute; // parent container must be position: relative
right: 10px; // typical padding around my text
bottom: 10px; // same reason as above
padding-left: 5px; // spare some space before Ellipsis
background-color: #fff; // hide text behind
}
et je vérifie simplement avec le code js des débordements sur les divs, comme ceci:
function handleMultilineOverflow(div) {
// get actual element that is overflowing, an anchor 'a' in my case
var element = $(div).find('a');
// don't know why but must get scrollHeight by jquery for anchors
if ($(element).innerHeight() < $(element).prop('scrollHeight')) {
$(element).addClass('manual-Ellipsis');
}
}
Exemple d'utilisation en HTML:
<div class="towrap">
<h4>
<a class="forcewrap multiline" href="/some/ref">Very long text</a>
</h4>
</div>
S'il vous plaît vérifier ce code ci-dessous pour l'astuce pure css avec un alignement correct qui prend en charge pour tous les navigateurs
.block-with-text {
overflow: hidden;
position: relative;
line-height: 1.2em;
max-height: 103px;
text-align: justify;
padding: 15px;
}
.block-with-text:after {
content: '...';
position: absolute;
right: 15px;
bottom: -4px;
background: linear-gradient(to right, #fffff2, #fff, #fff, #fff);
}
.
<p class="block-with-text">The Hitch Hiker's Guide to the Galaxy has a few things to say on the subject of towels. A towel, it says, is about the most massivelyuseful thing an interstellar hitch hiker can have. Partly it has great practical value - you can wrap it around you for warmth as you bound across the cold moons of Jaglan Beta; you can lie on it on the brilliant marble-sanded beaches of Santraginus V, inhaling the heady sea vapours; you can sleep under it beneath the stars which shine so redly on the desert world of Kakrafoon; use it to sail a mini raft down the slow heavy river Moth; wet it for use in hand-to-hand-combat; wrap it round your head to ward off noxious fumes or to avoid the gaze of the Ravenous Bugblatter Beast of Traal (a mindboggingly stupid animal, it assumes that if you can't see it, it can't see you - daft as a bush, but very ravenous); you can wave your towel in emergencies as a distress signal, and of course dry yourself off with it if it still seems to be clean enough. More importantly, a towel has immense psychological value. For some reason, if a strag (strag: non-hitch hiker) discovers that a hitch hiker has his towel with him, he will automatically assume that he is also in possession of a toothbrush, face flannel, soap, tin of biscuits, flask, compass, map, ball of string, gnat spray, wet weather gear, space suit etc., etc. Furthermore, the strag will then happily lend the hitch hiker any of these or a dozen other items that the hitch hiker might accidentally have "lost". What the strag will think is that any man who can hitch the length and breadth of the galaxy, rough it, slum it, struggle against terrible odds, win through, and still knows where his towel is is clearly a man to be reckoned with.</p>
Dommage que CSS ne supporte pas le clampage multi-lignes sur plusieurs navigateurs, seul webkit semble le pousser.
Vous pouvez essayer d’utiliser une simple bibliothèque javascript Ellipsis comme Ellipsity sur github. Le code source est très propre et petit. Par conséquent, si vous devez apporter des modifications supplémentaires, cela devrait être assez simple.
Ma solution qui fonctionne pour moi pour Ellipsis multiligne:
.crd-para {
color: $txt-clr-main;
line-height: 2rem;
font-weight: 600;
margin-bottom: 1rem !important;
overflow: hidden;
span::after {
content: "...";
padding-left: 0.125rem;
}
}
Si vous utilisez javascript, vous pouvez peut-être faire quelque chose comme ci-dessous. Cependant, cela ne tient pas compte de la hauteur du conteneur ...
// whatever string
const myString = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque sem ut consequat pulvinar. Curabitur vehicula quam sit amet risus aliquet, sed rhoncus tortor fermentum. Etiam ac fermentum nisi. Ut in lobortis eros. Etiam urna felis, interdum sit amet fringilla eu, bibendum et nunc.';
// you can set max string length
const maxStrLength = 100;
const truncatedString = myString.length > maxStrLength ? `${myString.substring(0, maxStrLength)}...` : myString;
console.log(truncatedString);Après avoir regardé sur Internet et essayé beaucoup de ces options, le seul moyen de s’assurer qu’il est correctement couvert par la prise en charge de i.e est par le biais de javascript.
* note J'ai utilisé Jquery et exige que votre classe post__items ait une hauteur maximale fixe.
// loop over post items
$('.post__items').each(function(){
var textArray = $(this).text().split(' ');
while($(this).prop('scrollHeight') > $(this).prop('offsetHeight')) {
textArray.pop();
$(this).text(textArray.join(' ') + '...');
}
});
p{
line-height: 20px;
width: 157px;
white-space: nowrap;
overflow: hidden;
text-overflow: Ellipsis;
}
ou nous pouvons restreindre les lignes en utilisant et height et overflow.
Vous pouvez bien utiliser la fonction line-clamp en CSS3.
p {
overflow: hidden;
text-overflow: Ellipsis;
display: -webkit-box;
line-height: 25px;
height: 52px;
max-height: 52px;
font-size: 22px;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
Assurez-vous de modifier les paramètres comme vous le souhaitez.