28172 sujets

CSS et mise en forme, CSS3

Scinder un long mot

Hi,

j'ai un petit problème au niveau css.

Je n'arrive pas a scinder un long mot sans espaces. Ce que j'ai fais fonctionne très bien pour les mots avec espace, dès qu'il y a voiciunlongmotsansespace, alors le mot est simplement non affiché. Ce que je comprends, je cherche une autre méthode ou une amélioration de la mienne pour que dans ces cas particuliers seul le début du mot ne soit affiché.

Si ça ne va pas, la solution serait de scinder le mot avant, côté serveur, mais j'aimerais autant ne pas arriver a cela.

Voici mon code :
<html>
<head>
<style>
	#container {
		background-color:red;
		width:150px;
		overflow:hidden;
	}
	
	.child {
		height:19px;
		overflow:hidden;
	}
	
	.firstImg {
		display:inline;
	}
	
	.secondImg {
		display:inline;
	}
	
	.nameAndUnreadMessages {
		display:inline;
	}
	.name {
		display:inline;
	}
	.unreaMessages {
		display:inline;
	}
</style>
</head>
<body>
	<div id="container">
		<div class="child">
			<div class="firstImg">
				<img src="x" width="7" height="7"/>
			</div>
			<div class="secondImg">
				<img src="x" width="17" height="13"/>
			</div>
			<div class="nameAndUnreadMessages">
				<div class="name">pti titre</div>&nbsp;<div class="unreaMessages">4</div>
			</div>
		</div>
		<div class="child" style="padding-left:16px">
			<div class="firstImg">
				<img src="x" width="7" height="7"/>
			</div>
			<div class="secondImg">
				<img src="x" width="17" height="13"/>
			</div>
			<div class="nameAndUnreadMessages">
				<div class="name">LE LONG TITRE EN GROS BIEN LOURD</div>&nbsp;<div class="unreaMessages"></div>
			</div>
		</div>
		<div class="child" style="padding-left:16px">
			<div class="firstImg">
				<img src="x" width="7" height="7"/>
			</div>
			<div class="secondImg">
				<img src="x" width="17" height="13"/>
			</div>
			<div class="nameAndUnreadMessages">
				<div class="name">LELONGTITREENGROSBIENLOURDATTACHE</div>&nbsp;<div class="unreaMessages"></div>
			</div>
		</div>
		<div class="child">
			<div class="firstImg">
				<img src="x" width="7" height="7"/>
			</div>
			<div class="secondImg">
				<img src="x" width="17" height="13"/>
			</div>
			<div class="nameAndUnreadMessages">
				<div class="name">pti titre2</div>&nbsp;<div class="unreaMessages">4</div>
			</div>
		</div>
	</div>
</body>
</html>
Merci beaucoup ça a l'air de fonctionner!

Je suis arrivé a ça en bricolant, ça fonctionne sur ie et ff :

Bon maintenant faut l'intégrer...

<html>
<head>
<style>
	#container {
		background-color:red;
		width:150px;
	}
	
	.child {
		border-bottom:1px solid black;
	}
	.firstImg {
		display:inline;
	}
	
	.secondImg {
		display:inline;
	}
	
	.name {
		display:inline;
	}
	
	.unreaMessages {
		display:inline;
	}
	
	.ellipsis .nameAndUnreadMessages 
	{    
		white-space:nowrap;    
		text-overflow:clip ; /* for internet explorer */    
		overflow:hidden;    
		width:60px;
	} 
	html>body .ellipsis .nameAndUnreadMessages 
	{    
		max-width:50px;
		display:inline-block;
		vertical-align:middle;
	}
</style>
</head>
<body>
	<div id="container">
		<div class="child">
			<div class="childHeader ellipsis">
				<div class="firstImg">
					<img src="x" width="7" height="7"/>
				</div>
				<div class="secondImg">
					<img src="x" width="17" height="13"/>
				</div>
				<span class="nameAndUnreadMessages">
					<div class="name">pti titre</div>&nbsp;<div class="unreaMessages">4</div>
				</span>
			</div>
		</div>
		<div class="child">
			<div class="childHeader ellipsis">
				<div class="firstImg" >
					<img src="x" width="7" height="7"/>
				</div>
				<div class="secondImg">
					<img src="x" width="17" height="13"/>
				</div>
				<span class="nameAndUnreadMessages">
					<div class="name">LE LONG TITRE EN GROS BIEN LOURD</div>&nbsp;<div class="unreaMessages"></div>
				</span>
			</div>
		</div>
		<div class="child">
			<div class="childHeader ellipsis">
				<div class="firstImg" style="padding-left:16px">
					<img src="x" width="7" height="7"/>
				</div>
				<div class="secondImg">
					<img src="x" width="17" height="13"/>
				</div>
				<span class="nameAndUnreadMessages">
					<div class="name">LELONGTITREENGROSBIENLOURDATTACHE</div>&nbsp;<div class="unreaMessages"></div>
				</span>
			</div>
		</div>
		<div class="child">
			<div class="childHeader ellipsis">
				<div class="firstImg">
					<img src="x" width="7" height="7"/>
				</div>
				<div class="secondImg">
					<img src="x" width="17" height="13"/>
				</div>
				<span class="nameAndUnreadMessages">
					<div class="name">pti titre2</div>&nbsp;<div class="unreaMessages">4</div>
				</span>
			</div>
		</div>
	</div>
</body>
</html>
Au fait à la place d'avoir un <div> avec cette classe :
.firstImg {display:inline;}

Tu devrais utiliser un <span>
Hmm ca va pas en fait le overflow ellipsis car je ne connais pas la taille du block nameAndUnreadMessages. Elle varie en fait en fonction de la place qu'il y a.

Car un element peut avoir des enfants et les enfants sont tous decalé de 16px ce qui veut dire que pour les parents il y aura width:60px; et les enfants width:44px;
Remarque en passant: apprendre HTML ne serait pas du luxe.
Parmi tous les défauts du code HTML présenté, il y a avant tout l'absence de Doctype. Une page sans Doctype est affichée en mode «comme IE 5.5» dans toutes les versions d'Internet Explorer (même les plus récentes). Ne pas placer en début de page un Doctype en bonne et due forme, c'est juste suicidaire. Smiley cligne
Modifié par Florent V. (23 Apr 2010 - 00:07)
Ça je l'ai déjà dis qu'il en fallait une, j'ai pas été très bien écouté alors j'ai laissé tombé.

J'ai plus trop envie maintenant d'en mettre une car j'ai un peu peur que ça bouscule trop le css.

Alors on si quelqu'un a une solution sans dtd ça m'arrangerait sinon avec dtd je prends quand même, on sait jamais...
bonsoir,

Pour le doctype , (j'imagine peut-être mal) , que c'est du au fait que tu teste avec des balise images sans les liées a une quelconque image ...

Ensuite , c'est vrai que ta suite de div font un peu peur Smiley smile .

Avec un doctype et une vrai image dans src , plutot que x , tu devrais mieux t'en sortir et mettre bon nombre de navigateur d'accord.

IE6 est toujours un cas, mais des alternatives acceptables sont toujours envisageables.

Je ne sais pas comment tu as aborde les styles dés le depart , mais personellement j'ai toujours une pensée pour les contexte de formatage et IE6 (il m'a traumatisé probablement celui-la Smiley smile ) .

Sans remplacer un script serveur (ou un js ) , voici comment j'aborde ton idée Smiley decu omis les alt vide ou non de tes images) .

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>test</title>
<style type='text/css'>
/* reset de confort pour test */
div , h2 , p {margin:0;padding:0;}
/* pour afficher la zone que les images qui n'existent pas sont 

sensées occuper [langue] */
.child img {display:inline-block;background:yellow; /* a retirer 

*/margin: 0 1px;}

    #container { 
        background-color:red; 
        width:150px;

    } 
    
    .child { 
        border-bottom:1px solid black;
		width:100%;
		overflow:hidden;
		position:relative;
    } 
    .child p{ 
        float:left;
	/* correctif IE6 et moins en !important; */
	margin-right:0!important;		
	margin-right:-150px;/* equivalence au max egale a la largeur du container pour ne pas trop s'ecarter de la raison [langue] et au minimum a la largeur de cet element .. il y a les 3px qui compense le padding-left:0.1em non applicable de h2 ...  */
    }
   .child h2{ 
        font-size:1.2em;/* reset ? */
        white-space:nowrap;
		padding:0 0.1em;
		overflow:hidden;
		/* correctif IE6 et moins en !important; */
		margin-left:0!important;
		margin-left:30px;
		float:none!important;
		float:left;
		display:block!important;
		display:inline;
		word-wrap:break;

    }
   .child span{ 
		 position:absolute;
		 right:0;
		 bottom:0;
		 background:red;
		 padding:0 0.12em;
    } 
.child span:before {content:'... ';}

    .erste{ 
        width:7px;height:7px;vertical-align:bottom;
    }  
    .tweede { 
        width:17px;height:13px;vertical-align:bottom;
    } 
     
</style>
</head>
<body>
    <div id="container"> 
        <div class="child"> 
          <p><img src="x" width="7" height="7" class="erste" /><img src="x" width="17" height="13" class="tweede"/></p> 
          <h2 class="nameAndUnreadMessages">pti titre <span>4</span></h2> 
        </div> 
        <div class="child"> 
          <p><img src="x" width="7" height="7" class="erste" /><img src="x" width="17" height="13" class="tweede"/></p> 
		  <h2 class="nameAndUnreadMessages">pti titre long <span>4</span></h2> 
        </div> 
        <div class="child"> 
          <p><img src="x" width="7" height="7" class="erste" /><img src="x" width="17" height="13" class="tweede"/></p> 
          <h2 class="nameAndUnreadMessages">pti titre plus long <span>4</span></h2> 
        </div> 
        <div class="child"> 
          <p><img src="x" width="7" height="7" class="erste" /><img src="x" width="17" height="13" class="tweede"/></p> 
          <h2 class="nameAndUnreadMessages">pti titre encore plus long <span>4</span></h2> 
        </div> 
        <div class="child"> 
          <p><img src="x" width="7" height="7" class="erste" /><img src="x" width="17" height="13" class="tweede"/></p> 
	      <h2 class="nameAndUnreadMessages">paptititrequijavane <span>4</span></h2> 
        </div> 
    </div> 
</body>
</html>


j'essaie toujours de me faire un balisage facile a relire , la semantique ou l'accessibilité ne sont pas une préoccupation majeure au premier abord , j'y tend une oreille sans prise de tête Smiley smile .

en faisant usage d'un doctype et un peu de balisage significatif , ça donne du confort dés le départ , rien de génial .

Cordialement , GC
Merci pour ton aide.

Je vais voir si je peux mettre un dtd maintenant mais j'y doute fort car je pense que cela ferait trop de changement.

Je ne peux aussi pas trop me permettre de changer le HTML car plusieurs dizaines de templates sont déjà créés et si je fais trop de modif ça plait pas au javascript.

Je sens que ça va être rigolo ...

Par contre dans ton exemple, même les petits labels (ceux qui n atteignent pas le bout de la ligne) ont 3 points a la fin, est ce normal ?
Sujet clos
Aller à