html - 固定幅スパンで長いテキスト/単語をラップまたは分割するにはどうすればよいですか?

Question

固定幅のスパンを作成したいのですが、スパンに何かを入力すると、<span>lgasdfjksdajgdsglkgsadfasdfadfasdfadsfasdfasddkgjk</span>間隔のないテキストの長い文字列、単語が改行または次の行に折り返されます。

何か案は？

score 214 · Accepted Answer

word-wrap:break-word;スパン幅に対して長すぎる場合に単語を分割する CSS プロパティを使用できます。

span { 
    display:block;
    width:150px;
    word-wrap:break-word;
}

<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>

score 18 · Accepted Answer

18

このような

  li span{
    display:block;
    width:50px;
    word-break:break-all;
}

于 2013-08-14T07:09:25.093 に答える

score 3 · Accepted Answer

デフォルトでは aspanはinline要素です...したがって、これはデフォルトの動作ではありません。

CSSspanに追加することで、そのように動作させることができます。display: block;

span {
    display: block;
    width: 100px;
}

score 2 · Accepted Answer

2

これを試して

span {
    display: block;
    width: 150px;
}

于 2013-08-14T07:16:44.150 に答える

score 0 · Accepted Answer

私の場合、display: ブロックは意図したとおりにデザインを壊していました。

プロパティはmax-width私を救ってくれました。

スタイリングにも使えますtext-overflow: ellipsis。

私のコードは

max-width: 255px
overflow:hidden

7 に答える 7