Comment puis-je définir la taille des colonnes max (affichage pas plus de 120 caractères dans la ligne

Question

je créer la page réactive avec plusieurs colonnes Dans l'exemple que j'ai 3 colonnes:. ROUGE, JAUNE, BLEU

est la manière de définir puis la page en grande résolution d'affichage, réglez caractères max au même nombre

<div class="container-fluid"> 
<div class="row"> 
    <div class="col-xs-4 panel" style="background-color: red"> 
     RED 
    </div> 
    <div class="col-xs-4 panel" style="background-color: yellow"> 
     YELLOW 
    </div> 
    <div class="col-xs-4 panel" style="background-color: blue"> 
     BLUE 
    </div> 
</div> 
</div> 

ma question est la suivante:? Comment configurer la colonne JAUNE pour afficher pas plus de 120 caractères dans la ligne

Answer 1

Vous ne pouvez pas limiter le nombre de caractères dans CSS. La méthode correcte consiste à utiliser la propriété max-width. Si vous voulez vraiment limiter le nombre de caractères à 120, vous pouvez le faire dans JS.

Avec jQuery:

$(".panel").each(function() { 
    $(this).text($(this).text().substring(0,120)); 
}); 

Answer 2

Pour être plus flexible, vous pouvez ajouter cet attribut personnalisé data-limit à votre élément. Puis affectez la limite de nombre de caractères à data-limit. L'exemple suivant utilise 3 comme limite, vous pouvez le remplacer par le nombre dont vous avez besoin.

$(document).ready(function() { 
 
    var divs = $('div[data-limit]'); 
 
    var limit = parseInt(divs.attr("data-limit")); 
 
    var originalText = divs.text().trim(); 
 
    if (originalText.length > limit) { 
 
    divs.text(originalText.substring(0, limit)); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-xs-4 panel" style="background-color: red"> 
 
     RED 
 
    </div> 
 
    <div class="col-xs-4 panel" style="background-color: yellow" data-limit="3"> 
 
     YELLOW 
 
    </div> 
 
    <div class="col-xs-4 panel" style="background-color: blue"> 
 
     BLUE 
 
    </div> 
 
    </div> 
 
</div>