28198 sujets

CSS et mise en forme, CSS3

Est-il possible de masquer un mot d'une phrase ?

Bonjour,

Certains titres des pages de mon site contiennent un prefixe que je souhaite masquer. Exemple :
a écrit :
Bienvenue : Voici mon titre

Je souhaite masquer le "Bienvenue : " sans l'enlever du réel titre dans mon BO, ça deviendrait donc :
a écrit :
Voici mon titre


Sauf erreur, il me semble que c'est possible en CSS ou Javascript. Mais je préfère largement le CSS. Est-ce que vous pouvez confirmer et m'indiquer comment svp ?

Code
<div class="uicore uicore-container">
<h1 class="uicore-title uicore-animate h1">Bienvenue&nbsp;: <span>Ici mon titre</span>                            </h1>
</div>
salut
en css

display: none;
le mot concerné est retiré du flux

visibility: hidden;
le mot reste dans le flux mais laisse un espace blanc
Modifié par drphilgood (26 Jan 2025 - 17:39)
Administrateur
Bonjour,

cacher un élément est facile. Cacher un élément mais pas son enfant direct est un bricolage. Sans nom je pense mais j'ai que 2 hacks en tête.

Il serait beaucoup plus robuste et facile d'avoir "Bienvenue :" dans un span et peu importe pour le reste du titre (mais pas dans ce span). Est-ce que c'est une modif possible ?
Sinon JS sera plus robuste je pense.
Modérateur
Pour une astuce CSS possible ici, ce serait:


h1 {
text-indent:-30em
}
h1 span {
float:left;
text-indent:0
}


Cela éjectera le texte sur la gauche d'environ 450 à 500 pixel et le span flottera à gauche en début de ligne.
Je préfère le text-indent + float au font-size sur cette structure precise, mais c'est personnel Smiley smile

Cdt
Salut,

si c'est pénible de modifier la structure HTML on peut jouer avec visibility et font-size pour faire l'illusion qu'il n'y a pas le début du titre :


h1{
  visibility:hidden;
  font-size:0px;
  
}
h1 span{
  visibility:visible;
  font-size:20px;
}

Petit JS pour illustrer : https://jsfiddle.net/w6a2905s/

Si on ne met pas visibility:hidden la partie avec une font-size de 0 pourra se retrouver dans des copier/coller
Hello,
Merci pour vos retours !

drphilgood, je pense que tu as mal compris ma demande.
Felipe, gcyrillus, c'est en effet une solution à laquelle je n'avais pas pensé, merci. Mais devant la complexité de la chose, je pense que je vais pencher pour du JS.
Administrateur
@gcyrillus : Ou -100vw c'est le plus sûr je crois. Un lecteur d'écran le restituera mais rien de grave puisque c'est pertinent (même si long) quand c'est affiché.

@Mathieuu : je pensais plus à ça parce que font-size: 0 a mauvaise presse (avait ?) avec les zooms navigateur ; j'ai lancé NVDA dès fois que ta solution soit accessible mais nan : il considère l'ensemble comme un span et plus un titre à cause de visibility: hidden. Le span enfant ne récupère pas le role="heading" natif de son parent. Ce qui est logique mais la journée a été longue Smiley murf

@cevichero : ce sera le plus accessible. Récup le contenu du span, remplacer le contenu du h1 par celui du span et le taff est fait. JS plus accessible que CSS si on peut pas toucher au HTML épisode 53 Smiley ravi
Il y a un seul ou plusieurs titres (h1) par page, et un seul ou plusieurs span par titre Smiley hein ? Selon la réponse ça complique plus ou moins la réponse.

Si on peut avoir plusieurs titres et plusieurs spans par titre ça doit donner ça : 

document.querySelectorAll("h1:has(span)").forEach(h => {
	let span = "";
	let separateur="";
	h.querySelectorAll("span").forEach(s => {
		span+=separateur+s.innerHTML;
		separateur=" ";
	});
	h.innerHTML=span;
})


Avec le petit jsfiddle qui va bien pour illustrer : https://jsfiddle.net/hqnyzc80/
Prévenir un modérateur
Répondre au sujet
Aller à