1

テキストセグメントに適用されたさまざまなスタイルを持つ単語で構成される div があります。

テキストが div の幅を超えた場合に次の行に移動するようにレイアウトを実装しようとしています。基本的に: 単語の区切りはありません。また、ここで重要なのは単語が決して改行されないようにすることです。単語全体が div 内に水平方向に収まらない場合は、次の行に移動する必要があります。

幅は、少なくとも最長の単語の幅よりも大きいと想定できます。

http://jsfiddle.net/cH5tN/15/

4

5 に答える 5

2

あなたは2つのことをすべきです。cssプロパティ'white-space: no wrap'を使用して、定型化された文字を単一のスパン内にネストします。これが更新されたフィドルですhttp://jsfiddle.net/cH5tN/44/

編集：

また、改行しないスペースは避け、特定のスペースでテキストを改行したくない特別な理由がない限り、スペースを使用する必要があります。

于 2012-09-24T20:33:37.203 に答える
1

私は「言葉」を別のものにラップし、divそれをスタイルするだけです。おそらくすでに単語を（異なるサイズの）文字に分割しているので、サーバー側で「単語」の周りに小さな div ラッパーを配置するのは簡単だと思われますか？

これらの行に沿ったもの:( http://jsfiddle.net/SS8rV/ ):

<style type="text/css">
.word
{
    float: left;
    height: 64px;
}
#box
{
    width:390px;
    height:390px;
    border:1px solid #F00;
    position:absolute;
    top:0px;
    left:0px;
}
</style>

<div id='box'>
    <div class='word'>
        <span style="font-size:64px;">L</span>
        <span style="font-size:16px;">ONGESTWOR</span>
        <span style="font-size:42px;">D</span>
    </div>
    <div class='word'>
        <span style="font-size:36px;">&nbsp;</span>
    </div>
    <div class='word'>
        <span style="font-size:24px;">regular&nbsp;</span>
    </div>
    <div class='word'>
        <span style="font-size:48px;">w</span>
        <span style="font-size:96px;">id</span>
        <span style="font-size:72px;">est</span>
    </div>
</div> 
​
于 2012-09-24T20:35:24.460 に答える
0

単語がdivに収まらない場合、単語は自動的に次の行に移動しますが、単語を個々の文字に分割したため、文字が単語としてくっつかないのです. 文字をくっつけたい場合は<br />、同じ行にとどまらない場合は a を使用します。ずさんですが、とにかく文字を壊しています。

于 2012-09-24T20:28:11.217 に答える
0

これはあなたを助けるかもしれません： 

 .message{
         white-space: -moz-pre-wrap !important;
         white-space: -pre-wrap;
         white-space: -o-pre-wrap;
         white-space: pre-wrap;
         word-wrap: break-word;
         word-break: break-all;
         white-space: normal;
    }
于 2015-07-06T07:11:17.253 に答える
0

「言葉」って何のことですか？KRyan が言ったように、これは指定された幅の div のデフォルトの動作です。もちろん、html は単語の下で何を理解しているかの語彙的側面を知りません。それはばかげています。単語を構成するスパンのコレクション (決定するのはあなた次第です) を別の div (またはスパン) にラップするだけです。

于 2012-09-24T20:31:24.350 に答える