J'ai besoin d'un script JQuery pour tronquer un texte paragraphe par ligne (pas par le nombre de caractères).
Je voudrais obtenir un bloc de texte uniformément tronqué. Il devrait avoir un lien "plus" et "moins" pour développer et raccourcir le paragraphe de texte. Mon paragraphe de texte est enveloppé dans un div avec une classe, comme celui-ci: La solution la plus proche que je puisse trouver sur SOF est celle ci-dessous (mais c'est pour l'élément textarea et ne fonctionne pas pour moi):
limiter le nombre de lignes dans Texarea Merci beaucoup pour tous les conseils.
BEN
6 Réponses :
Si vous avez utilisé une police monospaçatée, vous auriez un coup de feu à cela, car vous auriez une bonne idée du nombre de lettres adaptées à chaque ligne, pour un élément d'une largeur définie. Cependant, si un mot se brise à travers des lignes, cela pourrait être difficile ..
E: Trouvé une autre question qui est fondamentalement ce que vous êtes après - ils n'avaient pas vraiment de résolution, mais à mon esprit, la hauteur de la ligne et la hauteur de l'élément semble le plus proche.
"Comment puis-je compter lignes de texte à l'intérieur d'un élément DOM "
Pourquoi ne pas rendre l'élément P avec débordement: caché; Donnez une hauteur de ligne fixe, calcléate La hauteur de la DIV SO ID contient exactement le nombre de lignes dont vous avez besoin et que vous ne modifiez que la hauteur du P de JavaScript.
p{
overflow:hidden;
line-height:13px;
height:26px; /* show only 2 rows */
}
<script type="text/javascript">
function seeMoreRows(){
$(p).height("52px");
}
</script>
Merci pour le conseil. Cependant, cela ne semble pas suffisamment flexible car tous les paragraphes de la page ont une longueur différente (c'est en fait une liste d'informations). Si je l'étends à I.e. 52px, cela pourrait ne pas être assez d'espace pour certains et trop d'espace pour les autres. Il doit être dynamique d'une manière ou d'une autre.
C'était un exemple et je pense que vous pouvez calculer la nouvelle hauteur de manière dynamique mais la réponse d'Andy a l'air mieux que mon idée.
Pour une approche de base, vous pouvez consulter la propriété Si vous voulez quelque chose d'un peu plus avancé, vous pouvez obtenir les informations sur chaque ligne à l'aide de voir Cette réponse ici est ici pour un exemple (quel que soit un objectif sans rapport) de la manière dont Quelques pointeurs:
La collection renvoyée par getClientRects est statique, elle ne sera pas mise à jour automatiquement si les dimensions de l'élément contenant changent. Mon exemple fonctionne autour de cela en capturant l'événement de redimensionnement de la fenêtre.
Pour une étrange de conformité de normes de conformité que je ne comprends pas, l'élément que vous appelez getClientRects sur doit être un élément intégré. Dans l'exemple que j'ai, j'utilise un conteneur div avec le texte dans une autre div à l'intérieur avec Line-hauteur CSS et l'utiliser dans vos calculs. N'oubliez pas que cette approche ne tiendra pas compte des autres éléments en ligne supérieurs à cette hauteur (par exemple,
getClientRects () fonction. Cette fonction renvoie une collection d'objets textrectangle avec largeur, hauteur et décalage pour chacun.
getClientRects () fonctionne.
Affichage: Inline .
C'est la voie à suivre, à coup sûr. Je ne savais pas à ce sujet, +1
On dirait quelque chose qui pourrait être utilisé, merci. Cependant, je ne suis malheureusement pas assez intelligent pour mettre l'ensemble du script ensemble, y compris le lien plus / moins. Quelqu'un sait comment faire ça?
@Bento: Le vrai problème est que JavaScript nécessite que le contenu soit rendu en premier, puis modifié. Donc, vous avez un compromis, que ce soit, soit le contenu en totalité et rétrécissez-le lorsqu'il est prêt ou de le faire cacher, puis indiquez le montant dont vous avez besoin lorsque le document est prêt. C'est un design très maladroit et vous risquez peut-être mieux de marquer cette question comme répondu et de poser une autre question à un meilleur conseil.
Je ne sais pas comment tous les scripts de jQuery pour la troncature de texte trunctronnant avec cela. Avant / après. Pour le moment, j'utilise le script suivant et que l'effet n'est pas visible (au cas où il S rendu le HTML d'abord, puis tronque): http://plugins.learningjquery.com/expander/ il peut t être trop difficile d'une tâche, car il y a beaucoup de plugins JQuery, mais aucun ne fournit de troncature par ligne (uniquement par caractère): plugins.jquery.com/search/node/... Quelles questions suggérez-vous? Je ne sais pas comment la phrase en termes différents. Merci pour votre réponse.
J'ai fait ce petit code JQuery pour me permettre de tronquer des blocs de texte de tronquage par ligne (via CSS Classes), n'hésitez pas à l'utiliser et à le commenter.
voici le jsfiddle strong>, qui incluent également des fonctions tronquées par char type ou par nombre de mots. Vous pouvez voir que, actuellement, redimensionner la fenêtre ne rafraîchra pas l'affichage du bloc, je travaille dessus. P> /*
* Truncate a text bloc after x lines
* <p class="t_truncate_l_2">Lorem ipsum magna eiusmod sit labore.</p>
*/
$("*").filter(function () {
return /t_truncate_l_/.test($(this).attr('class'));
}).each(function() {
var el = $(this);
var content = el.text();
var classList = el.attr('class').split(/\s+/);
$.each(classList, function(index, item){
if(/^t_truncate_l_/.test(item)) {
var n = item.substr(13);
var lineHeight = parseInt(el.css('line-height'));
if(lineHeight == 1 || el.css('line-height') == 'normal')
lineHeight = parseInt(el.css('font-size')) * 1.3;
var maxHeight = n * lineHeight;
var truncated = $.trim(content);
var old;
if(el.height() > maxHeight)
truncated += '...';
while(el.height() > maxHeight && old != truncated) {
old = truncated;
truncated = truncated.replace(/\s[^\s]*\.\.\.$/, '...');
el.text(truncated);
}
}
});
});
tl; dr - Définissez une hauteur sur votre conteneur DIV, puis utilisez le Plugin JQuery DotdotDotdot
était sur le point de faire de l'exemple génial @andy E dans un plugin, mais ensuite réalisé https: // github. com / besite / jquery.dotdotdot pourrait retirer cela. Notre cas d'utilisation est que nous voulons montrer une ligne sur des largeurs de bureau et deux lignes sur mobile / tablette.
Notre CSS définira simplement le conteneur DIV sur l'équivalent d'une ou deux hauteur de ligne en conséquence, puis le plug-in DOTDotDot apparaît pour gérer le reste.
J'ai fait un petit module qui fonctionne avec du contenu de texte pur, aucune étiquette imbriquée et aucun rembourrage CSS sur l'élément contenant du texte n'est autorisé (mais cette fonctionnalité pourrait facilement être ajoutée).
Le HTML: P >
( function() {
$(document).ready(function(){
store_contents();
lazy_update(1000);
});
// Lazy update saves performance for other tasks...
var lazy_update = function(delay) {
window.lazy_update_timeout = setTimeout(function(){
update_ellipsis();
$(window).one('resize', function() {
lazy_update(delay);
});
}, delay);
}
var store_contents = function(){
$('.ellipsis').each(function(){
var p = $(this);
p.data('ellipsis-storage', p.html());
});
}
var update_ellipsis = function(){
$('.ellipsis').each(function(){
var p = $(this);
var max_line_count = p.data('ellipsis-max-line-count');
var line_height = p.html(' ').outerHeight();
var max_height = max_line_count*line_height;
p.html(p.data('ellipsis-storage'));
var p_height = p.outerHeight();
while(p_height > max_height){
var content_arr = p.html().split(' ');
content_arr.pop();
content_arr.pop();
content_arr.push('...');
p.html(content_arr.join(' '));
p_height = p.outerHeight();
}
});
}
} )();