Croix-navigateur multi-ligne de débordement de texte avec des points de suspension ajoutée au sein d'une largeur et une hauteur fixe `<div>`

Essayer le jQuery.dotdotdot plugin.

$(".ellipsis").dotdotdot();

Il n'y a pas une telle caractéristique dans le HTML, et c'est très frustrant.

J'ai développé une bibliothèque faire face à cela.

• Multiligne text-overflow: ellipsis
• Texte multiligne avec des technologies qui ne le supporte pas: SVG, Canvas par exemple
• Ont exactement les mêmes sauts de ligne dans votre texte SVG, dans votre HTML, et dans votre fichier PDF à l'exportation par exemple

Découvrez mon site pour la capture d'écran, tutoriel, et télécharger lien.

J'ai une solution qui fonctionne bien, mais à la place des points de suspension, il utilise un dégradé. Les avantages sont que vous n'avez pas à faire toute JavaScript calculs, et il fonctionne pour largeur variable conteneurs, y compris les cellules d'un tableau. Il utilise un couple d'extra divs, mais il est très facile à mettre en œuvre.

http://salzerdesign.com/blog/?p=453

Edit: Désolé, je ne sais pas que le lien n'était pas assez. La solution est de mettre un div autour du texte et le style de la div pour le contrôle de la zone de débordement. À l'intérieur de la div mettre une autre div avec un "fondu" de gradient qui peut être fait par l'utilisation de CSS ou une image (pour les vieux IE). Le dégradé va de la transparence à la couleur de fond de la cellule du tableau et est un peu plus large que les points de suspension. Si le texte est long et débordements, il passe sous le "fade" div et regarde "disparu". Si le texte est court, le fondu est invisible, donc il n'y a pas de problème. Les deux conteneurs peuvent être ajustés pour permettre à une ou plusieurs lignes à afficher par le réglage de la hauteur du conteneur comme un multiple de la ligne de texte à la hauteur. Le "fade" div peut être positionné de façon à ne couvrent que la dernière ligne.

Voici la vanille, JavaScript solution que vous pouvez utiliser dans un pincement:

JS:

//@param 1 = element containing text to truncate
//@param 2 = the maximum number of lines to show
function limitLines(el, nLines) {
var nHeight,
el2 = el.cloneNode(true);
//Create clone to determine line height
el2.style.position = 'absolute';
el2.style.top = '0';
el2.style.width = '10%';
el2.style.overflow = 'hidden';
el2.style.visibility = 'hidden';
el2.style.whiteSpace = 'nowrap';
el.parentNode.appendChild(el2);
nHeight = (el2.clientHeight+2)*nLines; //Add 2 pixels of slack
//Clean up
el.parentNode.removeChild(el2);
el2 = null;
//Truncate until desired nLines reached
if (el.clientHeight > nHeight) {
var i = 0,
imax = nLines * 35;
while (el.clientHeight > nHeight) {
el.innerHTML = el.textContent.slice(0, -2) + '…';
++i;
//Prevent infinite loop in "print" media query caused by
//Bootstrap 3 CSS: a[href]:after { content:" (" attr(href) ")"; }
if (i===imax) break;
}
}
}
limitLines(document.getElementById('target'), 7);

CSS:

#test {
width: 320px;
font-size: 18px;
}

HTML:

<div id="test">
<p>Paragraph 1</p>
<p id="target">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Paragraph 3</p>
</div>

Vous pouvez jouer avec ça dans la codepen ci-dessous. Essayez de changer la taille de la police dans le panneau CSS et faire une modification mineure dans le panneau HTML (par exemple, ajouter un espace supplémentaire quelque part) pour mettre à jour les résultats. Quelle que soit la taille de la police, le paragraphe du milieu doit toujours être tronqué pour le nombre de lignes dans le deuxième paramètre passé à limitLines().

Codepen: http://codepen.io/thdoan/pen/BoXbEK

Mentionnés dotdotdot plugin jQuery de travail agréable angulaire:

(function (angular) {
angular.module('app')
.directive('appEllipsis', [
"$log", "$timeout", function ($log, $timeout) {
return {
restrict: 'A',
scope: false,
link: function (scope, element, attrs) {
//let the angular data binding run first
$timeout(function() {
element.dotdotdot({
watch: "window"
});
});
}
}
}
]);
})(window.angular);

Le correspondant de balisage serait:

<p app-ellipsis>{{ selectedItem.Description }}</p>

EDIT:
Est venu à travers Rasage qui est JS du plugin qui ne multi ligne de texte troncature basé sur un max-height vraiment bien. Il utilise les binaires de recherche afin de trouver le meilleur point de rupture. Certainement la peine d'enquêter.

RÉPONSE ORIGINALE À CETTE QUESTION:

J'ai dû venir avec un vanilla JS solution pour ce problème. Dans le cas que j'avais travaillé, j'ai dû adapter un long nom du produit dans la largeur limitée et sur deux lignes; tronqué par des points de suspension en cas de besoin.

J'ai utilisé les réponses de divers AFIN de postes de cuisiner quelque chose qui l'adapter à mes besoins. La stratégie est comme suit:

1. Calculer la moyenne de la largeur des caractères de la variante de police pour la taille de police souhaitée.
2. Calculer la largeur du conteneur
3. Calculer le nombre de caractères sur une seule ligne dans le conteneur
4. Calculer le nombre de caractères à tronquer la chaîne basé sur le nombre de caractères sur une ligne et le nombre de lignes, le texte est censé enveloppement au.
5. Tronquer la saisie de texte sur la base du calcul précédent (la prise en compte de caractères supplémentaires ajoutés par des points de suspension) et ajouter "..." à la fin

Exemple de Code:

JS:

/**
* Helper to get the average width of a character in px
* NOTE: Ensure this is used only AFTER font files are loaded (after page load)
* @param {DOM element} parentElement 
* @param {string} fontSize 
*/
function getAverageCharacterWidth(parentElement, fontSize) {
var textSample = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!@#$%^&*()";
parentElement = parentElement || document.body;
fontSize = fontSize || "1rem";
var div = document.createElement('div');
div.style.width = "auto";
div.style.height = "auto";
div.style.fontSize = fontSize;
div.style.whiteSpace = "nowrap";
div.style.position = "absolute";
div.innerHTML = textSample;
parentElement.appendChild(div);
var pixels = Math.ceil((div.clientWidth + 1) / textSample.length);
parentElement.removeChild(div);
return pixels;
}
/**
* Helper to truncate text to fit into a given width over a specified number of lines
* @param {string} text Text to truncate
* @param {string} oneChar Average width of one character in px
* @param {number} pxWidth Width of the container (adjusted for padding)
* @param {number} lineCount Number of lines to span over
* @param {number} pad Adjust this to ensure optimum fit in containers. Use a negative value to Increase length of truncation, positive values to decrease it.
*/
function truncateTextForDisplay(text, oneChar, pxWidth, lineCount, pad) {
var ellipsisPadding = isNaN(pad) ? 0 : pad;
var charsPerLine = Math.floor(pxWidth / oneChar);
var allowedCount = (charsPerLine * (lineCount)) - ellipsisPadding;
return text.substr(0, allowedCount) + "...";
}
//SAMPLE USAGE:
var rawContainer = document.getElementById("raw");
var clipContainer1 = document.getElementById("clip-container-1");
var clipContainer2 = document.getElementById("clip-container-2");
//Get the text to be truncated
var text=rawContainer.innerHTML;
//Find the average width of a character
//Note: Ideally, call getAverageCharacterWidth only once and reuse the value for the same font and font size as this is an expensive DOM operation
var oneChar = getAverageCharacterWidth();
//Get the container width
var pxWidth = clipContainer1.clientWidth;
//Number of lines to span over
var lineCount = 2;
//Truncate without padding
clipContainer1.innerHTML = truncateTextForDisplay(text, oneChar, pxWidth, lineCount);
//Truncate with negative padding value to adjust for particular font and font size
clipContainer2.innerHTML = truncateTextForDisplay(text, oneChar, pxWidth, lineCount,-10);

CSS:

.container{
display: inline-block;
width: 200px;
overflow: hidden;
height: auto;
border: 1px dotted black;
padding: 10px;
}

HTML:

<h4>Untruncated</h4>
<div id="raw" class="container">
This is super long text which needs to be clipped to the correct length with ellipsis spanning over two lines
</div>
<h4>Truncated</h4>
<div id="clip-container-1" class="container">
</div>
<h4>Truncated with Padding Tweak</h4>
<div id="clip-container-2" class="container">
</div>

PS:

1. Si la troncature est d'être sur une seule ligne, le pur CSS méthode d'utilisation de text-overflow: ellipsis est plus lisible
2. Polices qui n'ont pas une largeur fixe peut provoquer la troncature à arriver trop tôt ou trop tard (comme des caractères différents ont des largeurs différentes). À l'aide du pad paramètre permet d'atténuer ce, dans certains cas, mais ne sera pas infaillible 🙂
3. Permettra d'ajouter des liens et des références à l'original postes après je reçois ordinateur portable (besoin de l'histoire)

PPS: Viens de réaliser que c'est très similaire à l'approche suggérée par @DanMan et @st.jamais. La caisse des extraits de code pour un exemple de mise en œuvre.

Très simple javascript solution. Divs doit être de style f.e.:

.croppedTexts { 
max-height: 32px;
overflow: hidden;
}

Et JS:

var list = document.body.getElementsByClassName("croppedTexts");
for (var i = 0; i < list.length; i++) {
cropTextToFit(list[i]);
}
function cropTextToFit (o) {
var lastIndex;
var txt = o.innerHTML;
if (!o.title) o.title = txt;
while (o.scrollHeight > o.clientHeight) {
lastIndex = txt.lastIndexOf(" ");
if (lastIndex == -1) return;
txt = txt.substring(0, lastIndex);
o.innerHTML = txt + "…";
}
}

Étendre sur @DanMan la solution: dans le cas où la largeur variable de polices sont utilisées, vous pouvez utiliser une moyenne largeur de police. Cela a deux problèmes: 1) un texte avec trop de W, c'est un débordement et 2) un texte avec trop de je serait tronquée plus tôt.

Ou vous pouvez prendre le pire des cas, l'approche et l'utilisation de la largeur de la lettre "W" (qui je crois est le plus large). Cela élimine le problème 1 ci-dessus, mais s'intensifie problème 2.

Une approche différente pourrait être: laissez overflow: clip dans le div et ajouter des points de suspension l'article (peut-être une autre div ou de l'image) avec float: right; position: relative; bottom: 0px; (non testé). L'astuce est de faire apparaître l'image ci-dessus à la fin du texte.

Vous pouvez également afficher uniquement l'image lorsque vous savez que ça va déborder (dire, après environ 100 caractères)

Dans mon scénario, je ne pouvais pas obtenir de travail de l'une des fonctions mentionnées ci-dessus et j'ai aussi besoin de le dire à la fonction de combien de lignes pour montrer quelle que soit la taille de police ou la taille du conteneur.

J'ai basé ma solution sur l'utilisation de la Toile.savoir measuretext méthode (qui est un HTML5 fonction) comme expliqué ici par Domi, de sorte qu'il n'est pas complètement de la croix-navigateur.

Vous pouvez voir comment cela fonctionne sur ce violon.

C'est le code:

var processTexts = function processTexts($dom) {
var canvas = processTexts .canvas || (processTexts .canvas = document.createElement("canvas"));
$dom.find('.block-with-ellipsis').each(function (idx, ctrl) {
var currentLineAdded = false;
var $this = $(ctrl);
var font = $this.css('font-family').split(",")[0]; //This worked for me so far, but it is not always so easy.
var fontWeight = $(this).css('font-weight');
var fontSize = $(this).css('font-size');
var fullFont = fontWeight + " " + fontSize + " " + font;
//re-use canvas object for better performance
var context = canvas.getContext("2d");
context.font = fullFont;
var widthOfContainer = $this.width();
var text = $.trim(ctrl.innerHTML);
var words = text.split(" ");
var lines = [];
//Number of lines to span over, this could be calculated/obtained some other way.
var lineCount = $this.data('line-count');
var currentLine = words[0];
var processing = "";
var isProcessing = true;
var metrics = context.measureText(text);
var processingWidth = metrics.width;
if (processingWidth > widthOfContainer) {
for (var i = 1; i < words.length && isProcessing; i++) {
currentLineAdded = false;
processing = currentLine + " " + words[i];
metrics = context.measureText(processing);
processingWidth = metrics.width;
if (processingWidth <= widthOfContainer) {
currentLine = processing;
} else {
if (lines.length < lineCount - 1) {
lines.push(currentLine);
currentLine = words[i];
currentLineAdded = true;
} else {
processing = currentLine + "...";
metrics = context.measureText(processing);
processingWidth = metrics.width;
if (processingWidth <= widthOfContainer) {
currentLine = processing;
} else {
currentLine = currentLine.slice(0, -3) + "...";
}
lines.push(currentLine);
isProcessing = false;
currentLineAdded = true;
}
}
}
if (!currentLineAdded)
lines.push(currentLine);
ctrl.innerHTML = lines.join(" ");
}
});
};
(function () {
$(document).ready(function () {
processTexts($(document));
});
})();

Et le code HTML pour l'utiliser, il serait comme ça:

<div class="block-with-ellipsis" data-line-count="2">
VERY LONG TEXT THAT I WANT TO BREAK IN LINES. VERY LONG TEXT THAT I WANT TO BREAK IN LINES.
</div>

Le code pour obtenir la police-famille est plutôt simple, et dans mon cas, œuvres, mais pour des scénarios plus complexes, vous pouvez avoir besoin d'utiliser quelque chose le long de ces lignes.

Aussi, dans mon cas, je suis contant de la fonction de combien de lignes à utiliser, mais vous pouvez calculer le nombre de lignes à afficher en fonction de la taille du conteneur et de la police.

J'ai écrit une composante angulaire qui permet de résoudre le problème. Il se fend d'un texte donné dans les éléments span. Après le rendu, il supprime tous les débordante éléments et place les points de suspension à droite après le dernier élément visible.

Exemple d'utilisation:

<app-text-overflow-ellipsis [text]="someText" style="max-height: 50px"></app-text-overflow-ellipsis>

Stackblitz démo: https://stackblitz.com/edit/angular-wfdqtd

Le composant:

import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ElementRef, HostListener,
Input,
OnChanges,
ViewChild
} from '@angular/core';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'app-text-overflow-ellipsis',
template: `
<span *ngFor="let word of words; let i = index" [innerHTML]="word + (!endsWithHyphen(i) ? ' ' : '')"></span>
<span #ellipsis [hidden]="!showEllipsis && !initializing" [class.initializing]="initializing" [innerHTML]="'...' + (initializing ? '&nbsp;' : '')"></span>
`,
styles: [`
:host {
display: block; 
position: relative;
}
.initializing {
opacity: 0;
}
`
]
})
export class TextOverflowEllipsisComponent implements OnChanges {
@Input()
text: string;
showEllipsis: boolean;
initializing: boolean;
words: string[];
@ViewChild('ellipsis')
ellipsisElement: ElementRef;
constructor(private element: ElementRef, private cdRef: ChangeDetectorRef) {}
ngOnChanges(){
this.init();
}
@HostListener('window:resize')
init(){
//add space after hyphens
let text = this.text.replace(/-/g, '- ') ;
this.words = text.split(' ');
this.initializing = true;
this.showEllipsis = false;
this.cdRef.detectChanges();
setTimeout(() => {
this.initializing = false;
let containerElement = this.element.nativeElement;
let containerWidth = containerElement.clientWidth;
let wordElements = (<HTMLElement[]>Array.from(containerElement.childNodes)).filter((element) =>
element.getBoundingClientRect && element !== this.ellipsisElement.nativeElement
);
let lines = this.getLines(wordElements, containerWidth);
let indexOfLastLine = lines.length - 1;
let lineHeight = this.deductLineHeight(lines);
if (!lineHeight) {
return;
}
let indexOfLastVisibleLine = Math.floor(containerElement.clientHeight / lineHeight) - 1;
if (indexOfLastVisibleLine < indexOfLastLine) {
//remove overflowing lines
for (let i = indexOfLastLine; i > indexOfLastVisibleLine; i--) {
for (let j = 0; j < lines[i].length; j++) {
this.words.splice(-1, 1);
}
}
//make ellipsis fit into last visible line
let lastVisibleLine = lines[indexOfLastVisibleLine];
let indexOfLastWord = lastVisibleLine.length - 1;
let lastVisibleLineWidth = lastVisibleLine.map(
(element) => element.getBoundingClientRect().width
).reduce(
(width, sum) => width + sum, 0
);
let ellipsisWidth = this.ellipsisElement.nativeElement.getBoundingClientRect().width;
for (let i = indexOfLastWord; lastVisibleLineWidth + ellipsisWidth >= containerWidth; i--) {
let wordWidth = lastVisibleLine[i].getBoundingClientRect().width;
lastVisibleLineWidth -= wordWidth;
this.words.splice(-1, 1);
}
this.showEllipsis = true;
}
this.cdRef.detectChanges();
//delay is to prevent from font loading issues
}, 1000);
}
deductLineHeight(lines: HTMLElement[][]): number {
try {
let rect0 = lines[0][0].getBoundingClientRect();
let y0 = rect0['y'] || rect0['top'] || 0;
let rect1 = lines[1][0].getBoundingClientRect();
let y1 = rect1['y'] || rect1['top'] || 0;
let lineHeight = y1 - y0;
if (lineHeight > 0){
return lineHeight;
}
} catch (e) {}
return null;
}
getLines(nodes: HTMLElement[], clientWidth: number): HTMLElement[][] {
let lines = [];
let currentLine = [];
let currentLineWidth = 0;
nodes.forEach((node) => {
if (!node.getBoundingClientRect){
return;
}
let nodeWidth = node.getBoundingClientRect().width;
if (currentLineWidth + nodeWidth > clientWidth){
lines.push(currentLine);
currentLine = [];
currentLineWidth = 0;
}
currentLine.push(node);
currentLineWidth += nodeWidth;
});
lines.push(currentLine);
return lines;
}
endsWithHyphen(index: number): boolean {
let length = this.words[index].length;
return this.words[index][length - 1] === '-' && this.words[index + 1] && this.words[index + 1][0];
}
}

ne sais pas si c'est ce que vous cherchez, il utilise min-hauteur au lieu de la hauteur.

    <div id="content" style="min-height:10px;width:190px;background:lightblue;">
<?php 
function truncate($text,$numb) {
//source: www.kigoobe.com, please keep this if you are using the function
$text = html_entity_decode($text, ENT_QUOTES);
if (strlen($text) > $numb) {
$text = substr($text, 0, $numb);
$etc = "..."; 
$text = $text.$etc;
} 
$text = htmlentities($text, ENT_QUOTES);
return $text;
}
echo truncate("this is a multi-lines text block, some lines inside the div, while some outside", 63);
?>
</div>