クロスブラウザを使用して長いテキストを分割したまま、垂直方向に配置された画像で単語を保持する方法

debugcn 投稿 Dev

クッキーモンスター

この質問がされたかどうかはわかりませんが、単語が長すぎて1行に収まらない場合を除いて、途中で単語を切り取りたくありません。通常はを使用してこれを行うことができますword-wrap:break-wordが、私の場合、テキストの先頭に小さな画像があり、垂直方向に配置されているため、単語が長すぎて1行に収まらない場合に改行が挿入されます。

http://jsfiddle.net/y2mps278/

改行を削除するにはどうすればよいですか？使ってみましたがwhite-space、何も得られませんでした。word-break: break-all改行を削除するように機能しますが、通常の単語を途中でカットします。必要に応じて、HTML構造を変更することができます。

IE11と、Windows上のChromeとFirefoxの最新バージョンで動作するためにこれが必要です。

Paulie_D

これはコンテンツ画像ではないようです...スタイリングです。

その場合は、CSSにプッシュして、背景画像として使用する必要があります

div {
  width: 150px;
  outline: 1px solid black;
  word-wrap: break-word;
}
span {
  vertical-align: middle;
  padding-left: 24px;
  background-image: url(http://lorempixel.com/output/abstract-q-c-24-24-6.jpg);
  background-repeat: no-repeat;
  background-position: center left;
  background-size: 24px 24;
}

<div>

  <span>ThisIsAVeryLongSentenceWithNoSpacesDoesItRenderCorrectly?</span>

</div>

<div>
   
    <span>This On the Other Hand, is A Very Long Sentence With Spaces. Does It Render Correctly?</span>

</div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-07-1

コメントを追加

サインイン

Related 関連記事

記事