Bonjour,

Je cherche à limiter le nombre de caractères dans une div class="taille-titre" avec un width en % sous le framework angularjs,

j'ai limité ainsi à 30 caractères mais le problème si on réduit la fenêtre du navigateur, cette valeur ne s'adapte pas et reste fixer à 30
<div class="taille-titre">
    <span class="video-headerBis">{{ fileinfo.name  | limitTo:30 }}...</span>
</div>

.taille-titre {
  display: inline;
  margin-left: 3%;
  overflow:hidden;
  white-space:nowrap;
}

.video-headerBis {
  float: left;
  margin-top: 1%;
  padding: 2% 0;
  color: #777;
  font-weight: bold;
  text-align: center; 
  overflow: hidden;
  text-overflow: ellipsis;
}


Le div gauche à une taille fixe et reste positionné à gauche et idem pour le div droit qui reste positionné à droite, seul le div centre qui s'adapte et sont contenu le texte doit s'adapter à celui-ci suivant la largeur de div centre et le nombre de lettres affichées par rapport à la largeur du div centre

J'aimerai savoir comment faire pour que cette limite (limiTo:30) varie en fonction de la largeur du div class="taille-titre", si la width = 20%, un certain nombre de caractères

s'affiche et suivi de "..." et si le div class="taille-titre" à une width = 60% alors on affiche plus de caractères et toujours suivie des "..."

Je ne sais pas faire cela.

Merci de votre aide !
peut être 
<div style="word-wrap: break-word;">contenu</div>
qui permet au texte de ne pas sortir du div quel que soit sa taille
Bon j'ai réussi à tout placer, comme je veux

Voilà le code : 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
		p {
		  text-align: center;
		  word-wrap: break-word;
		  overflow: hidden;
		  text-overflow: ellipsis;
		  background-color: #9400ff;
		  white-space: nowrap;
		}
		#container {
		  width: 100%;
		  height: 50px;
		  background-color: #CCC;
		  border: 1px solid #000;
		  overflow: hidden;
		}

		.gauche {
		  float: left;
		  width: 20%;
		  margin: 0;
		  background-color: #7cea23;
		  /*border: 1px solid #a8e0e0;*/
		}

		.centre {
		  float: left;
		  width: 100%;
		  margin: 0;
		  max-width: 50%;
		  /*border: 1px solid #514242;*/
		}

		.droit {
		  float: right;
		  width: 30%;
		  margin: 0;
		  background-color: #dff215;
		  /*border: 1px solid #f20c0c;*/
		}	
			</style>
</head>
<body>
	<div id="container">
  <div class="gauche">
    <p>bouton</p>
  </div><!-- gauche -->
  <div class="centre">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a placerat quam. Proin quis pulvinar massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam quis ornare arcu. Sed in eros dapibus, sagittis ex vel, tempor diam. Morbi convallis ex eget risus egestas lobortis. In.</p>
  </div><!-- centre -->
  <div class="droit">
    <p>Texte Droit</p>
  </div><!-- droit -->
</div><!-- container -->
</body>
</html>
un an plus tard
Répondre…