Укажите разрыв строки для отзывчивого дизайна

Я не могу найти, как указать, в какой момент строка должна сломаться, когда экран недостаточно велик. Например, мне хотелось бы, чтобы текст «Commune: CENON-SUR-VIENNE» разбился после двоеточия. Есть ли синтаксис, который позволяет указать это вручную, вместо того чтобы оставлять Bootstrap CSS автоматически?Укажите разрыв строки для отзывчивого дизайна

Включая часть моего HTML-кода ниже. Я хорошо специфицированы мета тег внутри <head>:

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

Скриншот:

HTML код:

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

источник

2016-06-13 wiltomap

вы могли бы попробовать это. https://jsfiddle.net/5vwh46f8/1/

Ввод второго слова в пролет и добавление стиля встроенного блока.

<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>

источник

2016-06-13 13:08:34

Очень хорошее и простое решение, огромное спасибо! – wiltomap

Нет проблем. благодаря –

Вы можете использовать available classes «для переключения контента на видовом экране контрольные точки". Например:

<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>

источник

2016-06-13 12:52:05

Вы можете управлять в отзывчивым стиле путем уменьшения размера шрифта

источник

2016-06-13 12:58:59 Saika

Привет Sarika, не точное решение для размера шрифта ... как насчет длинных слов. Это не сюита для длинных слов. –

Ya, Sayed, Я согласен с тобой, спасибо – Saika

Чтобы не сломать дефис, используйте неразрывный символ дефиса. (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>

источник

2016-06-13 13:25:08 Alohci

Укажите разрыв строки для отзывчивого дизайна

ответ

Смежные вопросы