时间戳

首页 > 解决方案 > 内容（一个词）比移动设备上的页面宽

html - 内容（一个词）比移动设备上的页面宽

问题描述

在我的页面上，我有一个标题，如果该标题较长，它将在移动设备上消失。

例如：

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

我展示了问题的照片： 点击这里

如果我不想设置较小的字体大小该怎么办？

标签： htmlcssbootstrap-4

解决方案

我不知道该网站的语言，但是您可以&shy在单词内部（在适当的位置）使用实体（称为“软连字符”），仅当它不适合其容器时才将其断开。

作为一个例子，这里有一个很长的废话，一次有软连字符，一次没有软连字符：

<h2>Runununufanlaerlknadlknalknaelknalkneflknalkneflknaelfknaelfknaeflknaelfknoaeiruodiulsk</h2>
<h2>Runununufanlaerlknadlknalknaelknalkneflkn&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>Runununufanlaerlknadlknalknaelknalkneflkn&shy;alkneflknaelfknaelfknaeflknaelfknoaeiruodiulsk</p>

如果有足够的水平空间，单词不会被分割，如果没有，它会在软连字符的位置被分割。

推荐阅读