Question

我正在为Wordpress制作主题，我的客户希望博客标题总是在2行，即使只有两个单词。是否有可能以某种方式将字符串始终分成中间？它应该是这样的：

= = = = = = = = = = = = = = =
=                           =
=    Short                  =
=    title                  =
=                           =
= = = = = = = = = = = = = = =

= = = = = = = = = = = = = = =
=                           =
=    A little               =
=    longer title           =
=                           =
= = = = = = = = = = = = = = =

= = = = = = = = = = = = = = =
=                           =
=    long title             =
=    with more words        =
=                           =
= = = = = = = = = = = = = = =

Answer 1

糟糕的做法，但很好，例如：

// Split your title to words:
var s = 'long title with more words'.split(' ');

if (s.length > 1) {

    // Add '<br>' into the center:
    s.splice(parseInt(s.length / 2) - 1, 0, '<br>');

    // Here is your result. Update HTML tag:
    console.log(s.join(' '));

} else {
    console.log(s + '<br>&nbsp;');
}

或者你可以从PHP做到：

<?php

$s = explode(' ', 'long title with more words');

if (count($s) > 1) {

    array_splice($s, intval(count($s) / 2) - 1, 0, '<br>');

    echo implode(' ', $s);

} else {
    echo $s[0], '<br>&nbsp;';
}

Answer 2

有很多方法可以做到。

<强> HTML

使用br代码

<强> JAVASCRIPT

获取div的文字并使用text方法
使用split(" ")方法
除以结果数组的长度
在第一个div中打印前半部分
下一个div的另一半

Answer 3

您可以使用<br/>来破解文字

<强> FIDDLE

<div>short
    <br/>title</div>
<div>A little
    <br/>longer title</div>
<div>long title
    <br/>with more words</div>

CSS

div {
    width:150px;
    height:80px;
    border:2px dotted;
    margin:10px;
    text-align:center;
}

文本总是在两行上

3 个答案: