J'ai plusieurs données (disons un nom, une adresse, un numéro de téléphone, une adresse e-mail) d'affilée, car elles occupent le bas de page d'une page Web.

Ils sont séparés par une construction espace-tiret-espace, comme ceci (mais centrée):

Name - address - phone - mail address

Sur les petits écrans, la page entière est plus petite et le texte s'enroule. J'utilise déjà des espaces insécables et des retours à la ligne pour m'assurer que tout se met en place mais que le résultat n'est pas satisfaisant.

Ce que je reçois est:

Name - address -
  phone - mail

Ce que je veux c'est:

Name - address
 phone - mail

Existe-t-il un moyen, avec CSS ou JS, de masquer dynamiquement certains caractères s'ils se trouvent au début ou à la fin d'une ligne?

Sinon, n'hésitez pas à suggérer différentes solutions qui n'impliquent pas de modifier la mise en forme d'origine du texte. Si je ne trouve pas de solution, j'opterai pour:

- Name -- address -- phone -- mail -

Se transformer en:

- Name -- address -
 - phone -- mail -

Ou quelque chose comme ça.

4
Zachiel 7 mars 2016 à 21:13

5 réponses

Meilleure réponse

Il n'y a aucun moyen de le faire avec du CSS pur, sauf si vous voulez simplement - à certaines tailles d'écran - définir la liste pour l'empiler verticalement et supprimer le - du document de manière dynamique.

Avec Javascript, c'est possible, mais la solution que j'ai trouvée peut être assez chère si elle est beaucoup utilisée sur une page, ou si l'écran est beaucoup redimensionné, car elle peut déclencher une repeinture assez étendue sur des mises en page complexes.


Solution Javascript

Tout d'abord, chacun de ces éléments, comme "Nom", "Adresse", "Téléphone", etc., devrait être un élément de bloc en ligne, et le caractère - à côté devrait être un élément ::after pseudo-élément. Ensuite, vous pouvez parcourir chacun de ces éléments inline-block, et lorsque vous en trouvez un qui a une position verticale sur la page inférieure à celle qui le précède, vous devez définir [the one before its pseudo-element] sur display: none et réinitialiser sur la page redimensionner.

HTML

<div>
  <ul class='tacky'>
    <li>Name</li>
    <li>Address</li>
    <li>Email</li>
    <li>Phone</li>
  </ul>
</div>

Javascript

Nécessite jQuery

handleList = function(c, e){
  var last;
  var lastHeight;

  $("li", e).each(function(count, listItem){
    var height = $(listItem).offset().top;

    if(typeof last !== 'undefined'){

      if(lastHeight < height){
        $(last).addClass("no-tack");
      }else{
        $(last).removeClass("no-tack");
      }
    }

    last = listItem;
    lastHeight = height;
  });
};

// jQuery event bindings for load
// and resize
$(document).ready(function(){
  $(".tacky").each(handleList);
});
$(window).resize(function(){
  $(".tacky").each(handleList);
});

CSS

Le CSS est là pour que nous puissions rendre le Javascript un peu plus léger.

.tacky
{
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.tacky li
{
  display: inline-block;
}

// add tack as a psuedo element
.tacky li:after
{
  content: "-";
  margin: 0 5px;
}

.tacky li:last-of-type:after
{
  content: "";
  margin: 0;
}

.tacky li.no-tack:after
{
  content: "";
  margin: 0;
  display: none;
}

Solution CSS

Pour cela, vous devez simplement choisir une taille d'écran (ou une série de tailles d'écran) sous laquelle le menu n'a plus de punaises. Ce n'est pas aussi dynamique, mais c'est un compromis qui utilise tous les CSS.

CSS

.tacky
{
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.tacky li
{
    display: inline-block;
}

.tacky li:not(:last-of-type):after
{
    content: "-";
    padding: 0 5px;
}

// Media selector to hide tack characters.
//
// 768 is the max screen width this will
// be visible on.
@media (max-width: 768px){ 
    .tacky li:after
    {
         display: none;
    }
}
1
Aeolingamenfel 28 mars 2016 à 16:12

Si vous savez sur quoi vous voulez qu'il se divise. Vous pouvez utiliser l'option Choisir ce qui va à la ligne suivante en modifiant la propriété d'affichage CSS et utiliser la propriété de contenu CSS pour ajouter et supprimer vos tirets en fonction de la taille de l'affichage.

<style>

p > span {display: inline-block;}
p > span:after{ content: " -";}
p > span:last-of-type:after {content: "";}

@media (max-width: 500px){
  p > span.street {display: block;}
  p > span.street:after{ content: "";}
}
@media (max-width: 300px){
  p > span {display: block;}
  p > span:after{ content: "";}
}
</style>
<p>
<span class="street">1600 Pennsylvannia Ave.</span>  
<span>Washington</span>
<span>DC</span>
<span>1-555-555-5555</span> 
</p>

Voici un violon: https://jsfiddle.net/ae9j994j/4/

1
J. Nilles 7 mars 2016 à 18:51

Peut-être ajouter une classe CSS sur un élément <span> entre tiret comme ceci:

Name - address <span class="toHideOnMobile"> - </span> phone - mail address

Utilisez ensuite un CSS pour les petits appareils comme celui-ci:

@media (max-width: 767px){
    .toHideOnMobile { display: none; }
}
2
Mr Lister 14 mars 2016 à 09:07

Je ne pense pas que vous puissiez le faire directement, mais voici une astuce qui pourrait fonctionner pour vous:

Si votre texte est text-align: left, vous pouvez forcer les coupures à se produire juste avant votre symbole -, puis créer un clip visuel (overflow: hidden) pour masquer le caractère le plus à gauche ou deux de chaque ligne.

Démo: https://jsfiddle.net/h4t96hav/

Il y a donc le symbole "-" au début de chaque ligne, mais vous ne pouvez pas le voir car le div intérieur est décalé de deux caractères vers la gauche et les clips externes.

Il faudrait un peu de fudging pour le faire fonctionner avec une police à largeur variable, mais je pense qu'il y a une marge d'erreur décente (car il y a un espace).

Notez que j'ai défini les morceaux sur display: inline-block pour que les retours ne se produisent pas à gauche des nombres.

Une astuce similaire pourrait bien sûr être utilisée pour text-align: right mais je ne peux pas penser à un moyen de gérer le texte centré.

1
JasonWoof 2 avril 2016 à 04:59

Bien sûr, il est un peu tard :) mais je pense que la solution CSS pure existe peut-être. Veuillez voir un code coupé ci-dessous.

Le fait est que les éléments de la liste (sauf le premier) ont une marge négative à gauche et la même marge positive à droite. En conséquence, ces marges annihilent le fait d'être sur la même ligne mais fournissent un retrait négatif de la deuxième ligne et des lignes suivantes. Et le débordement du conteneur: caché; cache les séparateurs supplémentaires sur la gauche. Il est important ici que les séparateurs aient une largeur fixe.

ul {
  list-style: none;
  padding: 0;
  
  overflow: hidden;
}

li {
  display: inline;
  white-space: nowrap;
  margin-right: 0.66em;
  margin-left: -0.66em;
}

li::before {
  display: inline-block;
  content: "-";
  width: 0.66em;
}

li:first-child {
  margin-left: 0;
}

li:first-child::before {
  content: none;
}
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
  <li>Item 16</li>
  <li>Item 17</li>
  <li>Item 18</li>
  <li>Item 19</li>
</ul>
2
David Mzareulyan 28 déc. 2019 à 21:30