Блог

Главная - Вопросы по программированию - Контент (одно слово) шире, чем страница на мобильном устройстве

Контент (одно слово) шире, чем страница на мобильном устройстве

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

На моей странице у меня есть заголовок, и если этот заголовок длиннее, он исчезнет со страницы на мобильном устройстве.

Например:

 <div class="module-head"><h3 class="module-head-title">Keresőoptimalizálás - Miért éri meg?</h3></div>

    .module-head {
    text-align: left;
    /*position: relative;*/
    margin: 40px 0;
}
.module-head-title {
    color: var(--main_purple_color);
    font-weight: 800;
    font-size: 2.5rem;
    display: inline-block;
}
.module-head:after {    
    content: "";
    display: block;
    background:  var(--main_red_color);
    width: 220px;
    max-width: 260px;
    height: 3px;
}

И я показываю фотографию проблемы:
Нажмите здесь

Что мне делать, если я не хочу устанавливать меньший размер шрифта?

Комментарии:

1. Я думаю, что ваше длинное слово в заголовке нарушает вашу ширину. Вы можете либо установить word-break: break-all; в своем заголовке, либо добавить amp;shy; в его тексте, либо использовать библиотеку, например дефис github.com/bramstein/hypher

2. И меньший размер шрифта? Может ли это быть решением для этого?

3. Да, это должно сработать, но только до определенной степени, так как более длинное слово снова нарушит его

4. Для длинных слов, которые занимают дополнительное пространство, вы можете использовать word-wrap: break-word; , но я не уверен в причине проблемы здесь, поскольку полного кода предоставленного вывода, который находится на картинке, здесь нет.

Ответ №1:

Я не знаю языка этого веб-сайта, но вы можете использовать amp;shy объект (называемый «мягким дефисом») внутри слова (в соответствующей позиции), чтобы разбить его только тогда, когда он не помещается в его контейнер.

В качестве примера приведем длинное бессмысленное слово, один раз с мягким дефисом и один раз без него:

 <h2>Runununufanlaerlknadlknalknaelknalkneflknalkneflknaelfknaelfknaeflknaelfknoaeiruodiulsk</h2>
<h2>Runununufanlaerlknadlknalknaelknalkneflknamp;shy;alkneflknaelfknaelfknaeflknaelfknoaeiruodiulsk</h2>

<h3>The same word including the soft hyphen, but with a smaller font (fits into one line, therefore it's not being broken by the soft hyphen):</h3>
<p>Runununufanlaerlknadlknalknaelknalkneflknamp;shy;alkneflknaelfknaelfknaeflknaelfknoaeiruodiulsk</p>

Если достаточно места по горизонтали, слово не будет разделено, если нет, оно будет разделено в положении мягкого дефиса.