web-dev-qa-db-fra.com

Spécifiez un saut de ligne pour une conception réactive

Je ne trouve pas comment spécifier à quel point une chaîne doit se casser lorsqu'un écran n'est pas assez grand. Par exemple, j'aimerais que le texte "Commune: CENON-SUR-VIENNE" se casse après le caractère deux-points. Existe-t-il une syntaxe qui permet de le spécifier manuellement au lieu de laisser Bootstrap CSS le faire automatiquement?

J'inclus un morceau de mon code HTML ci-dessous. J'ai bien spécifié la balise meta à l'intérieur du <head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Capture d'écran :

enter image description here

Code HTML:

<div class="container">
  <div class="tab-content">
    <div class="col-lg-5">
      <div>
        <h4>Commune : CENON-SUR-VIENNE</h4>
      </div>
    </div>
  </div>
</div>
csstwitter-bootstraptwitter-bootstrap-3line-breaks
12
wiltomap

vous pouvez essayer ça. https://jsfiddle.net/5vwh46f8/1/

Mettre le deuxième mot dans une plage et ajouter un bloc en ligne de style.

<div class="container">
<div class="tab-content">
<div class="col-lg-5">
  <div>
  <h4>Commune : <span>CENON-SUR-VIENNE</span></h4>
  </div>
</div>
</div>
</div>

<style>
h4 span{
display: inline-block;
} 
</style>
14
Nique Joe

Pour éviter de rompre sur un trait d'union, utilisez un caractère de trait d'union insécable. (U + 2011)

h4 { width: 200px }
<h4 class="using regular hyphen">Commune : CENON-SUR-VIENNE</h4>
<hr>
<h4 class="using non-breaking hyphen">Commune : CENON‑SUR‑VIENNE</h4>
3
Alohci

Vous pouvez gérer dans un style réactif en réduisant la taille de la police

0
Saika

Vous pouvez utiliser classes disponibles "pour basculer le contenu entre les points d'arrêt de la fenêtre". Par exemple:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<h4>Commune : <span class="visible-xs-inline"><br></span> CENON-SUR-VIENNE</h4>
0
Gleb Kemarsky