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

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

何か案は？

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

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

<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>

以下を追加してcssを試してくださいwhite-space：

span {
    display: block;
    word-wrap:break-word;
    width: 50px;
    white-space: normal
}

このような

デモ

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

デフォルトでspanは、a はinline要素です...そのため、これはデフォルトの動作ではありません。

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

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

これを試して

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

質問の実用的な範囲を拡張するため、および与えられた回答の付録として：セレクタをもう少し指定する必要がある場合があります。

フルスパンをdisplay：inline-blockとして定義すると、画像の表示が困難になる可能性があります。

したがって、私はそのようにスパンを定義することを好みます：

span {
  display:block;
  width:150px;
  word-wrap:break-word;      
}
p span, a span,
h1 span, h2 span, h3 span, h4 span, h5 span {
  display:inline-block;
}
img{
  display:block;
}

私の場合、display：blockは意図したとおりにデザインを壊していました。

max-widthプロパティは、ちょうど私を救いました。

また、スタイリングにも使用できますtext-overflow: ellipsis。

私のコードは

max-width: 255px
overflow:hidden