28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Petite question vis à vis d'un projet sur lequel je travaille.

En page d'accueil s'affichent des "dossiers", auxquels le client affecte des titres. Malheureusement dans l'affichage, l'espace pour le titre est fixe; du coup si celui-ci est trop long, c'est coupé.

Ma chef de projet a donc décidé d'ajouter un champ "titre court" dans l'interface d'administration, où le client saisira un autre titre plus court qui lui ne débordera pas. Dans la version de la page que j'ai récupérée, on avait donc quelque chose de similaire à:

a écrit :

<label for="DOS_TITRECOURT">Titre court</label>
<input name="DOS_TITRECOURT" type="text" id="DOS_TITRECOURT" maxlength="80">


Malheureusement cette valeur de 80 a été obtenue avec un texte arbitraire; si je remplis mon champ de '.', je peux en mettre plus d'une centaine dans la zone de texte fixe, mais si je mets des "W", je ne dépasse pas les 50.

Il y'a t-il une solution flexible à ce problème? L'idéal aurait été une vérification à la saisie via Javascript avec l'attribut DOM Element.offsetWidth mais celui ci ne marche que sous IE d'après la doc (oui le client utilise majoritairement IE, mais quand même Smiley biggol ).

Au pire je peux mettre un size à 40 (le nombre max du caractère le plus large), mais cette solution par défaut ne me plait que moyennement.

Merci!
Modifié par Noxneo (22 Jun 2009 - 10:53)
Bonjour,
Eh oui malheureusement cette question restera sans réponse...
Moi aussi j'ai espéré longtemps une solution. Il faut faire un choix arbitraire. De plus cela dépend de la police utilisé, des polices utilisable par le navigateur client,...

Donc impossible d'en tirer quelque chose de 100% fiable.

Il n'y a que 2 choix (à mon avis) :
1- Le titre sera toujours le même on ne laisse pas le client la possibilité de mettre à jour le texte.
2- On laisse au webmaster la possibilité de mettre à jour le champ, mais il doit le faire bien. Et vérifier le rendu. Un bon webmaster vérifie toujours l'affichage en front de ses modifications.

En attendant tranche et met un maxlength à 60 Smiley langue
Salut,

N'oublions pas ce bon vieux {text-overflow:ellipsis} qui, cela mérite d'être signalé, est parfaitement supporté par IE6-7-8 (normal, ça vient chez eux après tout), Safari et Opera, mais boudé par Firefox qui n'affiche pas les points de suspension et tronque simplement le texte (à la {text-overflow:hidden}), et rien de nouveau sous le soleil avec la version 3.5.

Solutions (pour Firefox, donc) :
- accepter le comportement par défaut (texte tronqué)
- ajouter les points de suspension à la mano via :after (mais même les textes courts les auront)
- implémenter le bon comportement en JS : pas testé mais des solutions existent apparemment (plugins jQuery entre autres)
Modifié par marcv (22 Jun 2009 - 17:26)
Sinon, un effet intéressant mais pas toujours heureux: le texte qui part en fondu (au noir ou au blanc ou autre suivant la couleur de fond). Ça se fait avec un texte qui dépasse (white-space: nowrap; overflow: hidden;) et un élément vide positionné en absolu sur la partie droite, avec une image de fond en PNG-32 qui dessine un dégradé de gauche à droite du transparent complet à la couleur de fond.