web-dev-qa-db-ja.com

レスポンシブデザインの改行を指定する

画面が十分に大きくないときに文字列が途切れるポイントを指定する方法がわかりません。たとえば、「Commmune：CENON-SUR-VIENNE」というテキストは、コロン文字の後ろで改行してください。 Bootstrap CSSが自動的に行う代わりに、これを手動で指定できる構文はありますか？

以下に私のHTMLコードの一部を含めます。 <head>内のメタタグを適切に指定しました。

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

スクリーンショット：

enter image description here

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

あなたはこれを試すことができます。 https://jsfiddle.net/5vwh46f8/1/

スパンに2番目のWordを置き、スタイルをインラインブロックに追加します。

<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

ハイフンで改行しないようにするには、改行しないハイフン文字を使用します。 （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

フォントサイズを小さくすることでレスポンシブなスタイルで管理できます

0
Saika

利用可能なクラス を使用して、ビューポートブレークポイント間でコンテンツを切り替えることができます。例えば：

<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