5

カンマ（、）を使用してテキストを折り返す必要があります。CSSまたはその他を使用してこれを行う方法はありますか？

Nomal A1, High A2(4), Low A3

スペースが十分でない場合は、このように折り返す必要があります。折り返す場所はコンマのみです。

Nomal A1, High A2(4),
Low A3

これはこのようにラップするべきではありません

Nomal A1, High A2(4), Low
A3
4

3 に答える 3

7

各ペアをスパンでラップし、壊れないようにスタイリングします。

HTML

<div class="paired-text">
<span>Nomal A1,</span> <span>High A2(4),</span>
        <span>Low A3</span>
</div>

CSS

.paired-text span{ white-space: nowrap; }

&nbsp;または、くっつけたい単語の各ペアの間に改行なしスペース ( ) をレンダリングすることもできます。私が提供する最初のアイデアを好みますが、それはよりクリーンです。

Nomal&nbsp;A1, High&nbsp;A2(4), Low&nbsp;A3

少し醜いですが、コードが少なくなります。

于 2012-11-08T15:01:05.077 に答える
2

最も安全な方法は、nobrマークアップを使用することです（これはどの仕様にも到達しませんでしたが、目的にとって最も信頼できる方法であり続けます）。

<nobr>Nomal A1,</nobr> <nobr>High A2(4),</nobr> <nobr>Low A3</nobr>

もう少し詳細なspanマークアップとCSSコードを使用することwhite-space: nowrapはほぼ同じくらい信頼できますが、たとえばブラウザーでCSSサポートが無効になっている場合は当然失敗します。

于 2012-11-08T17:16:24.233 に答える
0

CSSにはword-wrapプロパティがありますが、文字に基づいて折り返すオプションはありません。一般的に、CSSはスタイリングに限定されています。

これは、ビューポートを認識し、DOM（JavaScriptなど）を操作できるクライアント側のテクノロジを使用して行う必要があります。

于 2012-11-08T14:51:58.630 に答える