Question

我有以下问题。

是否有一个Methode可以打破一个超长的单词而不会丢失text-align:justify？

喜欢在中间打破它或者在中间用2个单词划分

这是JSFiddle

的示例

如果有更好的方法，你也可以使用Js或jquery：）

谢谢，

Tim4497

Answer 1

试试这段代码：

.user_message {
   word-break: break-all;
}

链接 - ＆gt; jsfiddle

Answer 2

我修改了之前的答案......

链接 - ＆gt; http://jsfiddle.net/jy7d431p/15/

你可以用一个额外的span标签来包围你认为太长的单词，并为它指定一个类名。

.user_message .break {
    text-align: justify;
    word-break:break-all;
}

所以现在只有你选择的单词会破坏

EDIT .....

好的，这就是整个事情，用php。

CSS：

<style>
    .wrapper {
        display: table;
    }
    .wrapper span:not([class="break"]) {
        display: table-cell;
    }
    .user_message {
        text-align: justify;
    }
    .break {
        color: red; 
        word-break: break-all;
    }
</style>

HTML和PHP

<?php

    $myText = "Sed vitae dui porta, rhoncus metus ac, malesuada diam. Duis ipsum ipsum, blandit ut ante quis, ullamcorper auctor purus. In hac habitasse platea dictumst. Aenean vitae maximus nunc. Sed vitae ligula eget lectus interdum bibendum eu et ex. Pellentesque in odio quis nulla scelerisque dignissim non vitae turpis. Suspendisse magna turpis, lobortis eget imperdiet varius, hendrerit sed nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce vel tellus sollicitudin, volutpat eros eget, maximus enim. Pellentesque et convallis orci. Suspendisse eu tempus elit. Nulla facilisi. Integer interdum risus massa, eu ultrices tortor iaculis ut.";
    $myWords = explode(" ", $myText);
    $output = "";
    $maxLen = 10;
    $totalWords = count($myWords)-1;

    for ($i = 0; $i <= $totalWords; $i++) {
        if (strlen($myWords[$i]) > $maxLen) {
            $myWords[$i] = "<span class=\"break\">".$myWords[$i]."</span>";
        }
        $output .= $myWords[$i].($i < $totalWords?" ":"");
    }

?>
<div class="wrapper">
    <span class="user_name" style="color:#FF7000">Test</span>
    <span>:</span>
    <span class="user_message"><?=$output;;?></span>
</div>

你有Sr.请告诉我这是否适合你。

休息，白色间距？如何在不丢失text-align：justify的情况下打破一个极端的词

2 个答案: