移动视图：徽标第二个字不在新行

Question

附图移动视图问题的图像。这个网站使用了不同的字母颜色jQuery。我也从stackoverflow获取jQuery代码，这个网站也在wordpress中。以及 SCRIPT SCALE我在标题Tag 中添加的两个单词。我需要在新行中推广SCALE字，这可能吗？我在索尼Xperia Z2手机中看到了。这个网站内置bootstrap。如果有人需要不同的字母颜色jQuery我会附加。提前致谢。 另外一件事：当我在Mozilla开发者移动视图中访问该网站时，所有显示都很好。但是在我的手机中遇到了这个问题

我也用过：

word-break: break-all;

和

word-wrap: break-word;

here is main online website link:

我在head标签中使用了jQuery代码：

$('document').ready(function() {
$('.protein').each(function() {
    var target = $(this).html();
    target = target.split("");
    var result = "";
    for (var i = 0, len = target.length; i < len; i++) {
        result += '<span class="' + target[i] + '">' + target[i] + '</span>';
    }
    $(this).html(result);
   });
});

和CSS代码：

.S { color:#fff;}
.c { color:#e21735;}
.r { color:#37a647;}
.i { color:#32b9e9;}
.p { color:#f85b3a;}
.t { color:#084e7f;}
.a { color:#c9db47;}
.l { color:#e43794;}
.e { color:#c749f0;}

和wordpress标题代码是：

<h1 class="cover-heading"><a href="<?php echo get_settings('home'); ?>" title="<?php bloginfo( 'name' ); ?> | <?php bloginfo( 'description' ); ?>" alt="<?php bloginfo( 'name' ); ?> | <?php bloginfo( 'description' ); ?>"><span class="protein"><?php bloginfo( 'name' ); ?></span></a></h1>

另见看到我使用了Script Scale wordpress主题中的代码：

http://codepen.io/scriptscale/pen/vyJGWZ

Answer 1

哦，添加你的代码后我很了解我最近了解了什么

将跨度包装在另一个span标记中，有些像这样

Dictionaries

修改

尝试下面的代码，它将跨度包装在另一个范围内

＆＃13;

＆＃13;

<span class="protein">
    <span style="display: inline-block;">
        <span class="S">S</span>
        <span class="c">c</span>
        <span class="r">r</span>
        <span class="i">i</span>
        <span class="p">p</span>
        <span class="t">t</span>
    </span> 
    <span style="display: inline-block;">
        <span class="S">S</span>
        <span class="c">c</span>
        <span class="a">a</span>
        <span class="l">l</span>
        <span class="e">e</span>
    </span>
</span>

＆＃13;

$('document').ready(function() {
  $('.protein').each(function() {
    var el = $(this);
    var html = el.html();
    var result = "";

    var split_by_space = html.split(" ");
    var split_by_space_length = split_by_space.length;


    for (var i = 0; i < split_by_space_length; i++) {
      result += '<span style="display:inline-block;">';
      
      var split_by_character = split_by_space[i].split("");
      var split_by_character_length = split_by_character.length;
      for (var j = 0; j < split_by_character_length; j++) {
            result += '<span class="'+split_by_character[j]+'">'+split_by_character[j]+'</span>'
      }

      result += '</span> ';
    }

    el.html(result);
  });
});

＆＃13;

.s {
  color: #444;
}
.c {
  color: #e21735;
}
.r {
  color: #37a647;
}
.i {
  color: #32b9e9;
}
.p {
  color: #f85b3a;
}
.t {
  color: #084e7f;
}
.a {
  color: #c9db47;
}
.l {
  color: #e43794;
}
.e {
  color: #c749f0;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

因为你没有提供任何代码，你可以这样做

使该特定元素的字体大小降低

像

h1{
 font-size: 16px;// change size as u want
 word-wrap: break-word;
}