一部の文字列の右寄せについて

質問

以下の例のとおり文字列の横に赤と書き赤の文字だけを装飾し右寄せします。
これはテーブルの中に書いているのですが、文字列が長くセル内で折り返し2行で
表示された際に赤の文字は3行目に右寄せされてしまいます。
これを2行目に表示させることはできないでそうか。
よろしくお願い致します。

.right {
text-align:right;
}
.aka {
background-color:#FF0000;
}

あいうえおかきくけこ<DIV CLASS="right"><SPAN CLASS="aka">赤</SPAN></DIV>

回答No.5

k0021

>文字列が長くセル内で折り返し2行で表示された際に赤の文字は3行目に右寄せされてしまいます。

考えを変えて　列の追加で対応しませんか

罫線が追加されますが

borderで各セル単位に罫線を指定すれは対応すると思います

但しIEのみ対応ですが

横とか縦の罫線は、<TABLE>タグに「RULES」属性にキーワードの指定により罫線の表示を指定できます。

参考URLは、不明です

間違っていたら御免ね

補足

社用のページのためNGでした。

回答No.4

koutarou504

<DIV style="float:left;clear:both;">あいうえおかきくけこ</DIV><DIV style="text-align:right;"><SPAN style="color:#FF0000;">赤</SPAN></DIV><DIV style="clear:both;"></DIV>

「かきくけこ」の後に (ブロック要素である) DIV 要素がある事で、改行が行われるのが普通というか、行単位で領域が確保されるというか・・・。
（背景色を指定してみれば、どこが該当領域か認識しやすいです。）

＞右寄せします
これを確保された領域の中での右寄せか領域ごと位置指定して何かしら基準としたい物の右寄せかによって、
手法が変わるというか（そもそも発想が変わる・・・）

上記例示は、直前のブロック要素に float を指定する事により改行を回避しています。
ただその為に、後方に解除用の追記もあり・・・。

お礼

参考にしてみたいと思いますがやはり思い通りに、なおかつHTML4.01 Strictのチェックで完璧な採点をされるように作るには難しいかもしれません。もう少しいろいろ考えようと思います。

回答No.3

noname#19175

１行で表示出来る場合は１行で、
表示しきれない場合は「あいうえおかきくけこ」「赤」で改行するようにするには、

<TD><NOBR><span class="left">あいうえおかきくけこ<WBR>赤</NOBR></TD>

で可能ですが、
<WBR><NOBR>とも、IEとNNの独自拡張だったような気がします。

「あいうえおかきくけこ」を左寄せ
「赤」を右寄せ（下寄せ）、というのはちょっと無理がありますね。

以下はたぶんブラウザ依存で表示位置がずれるかも
floatを使うときはwidthも指定しないと、期待通り表示されないことが多いです。

.left{
display:box;
text-align:left;
float:left;
}
.right{
display:box;
text-align:right;
float:right;
}

<td>
<span class="left">あいうえおかきくけこ</span><span class="right">赤</span>
</td>

「あいうえおかきくけこ」で改行される場合は、「赤」は１行目に表示されると思います。
もともと下段揃えというのはスタイルシートでは出来ないと思いますから。

どうしても、というならテーブルが無難かも、です。

<td>
<table width="100%"><tr><td valign="top">あいうえおかきくけこ</td><td align="right" valign="bottom">赤</td></tr></table>
</td>

＊動作未検証

お礼

テーブルを使う方法は採用したくなかったので。
先の方法は前の回答と同様で参考になりましたがレイアウト上ダメっぽいです。

回答No.2

crepon133

専門家ならもっと良いことを考えると思いますが・・・

.aka {
float:right;
background-color:#FF0000;
}
<td><span class="aka">赤</span>あいうえお</td></tr>

.aka {
background-color:#FF0000;
margin-left:1em;
}
<td>あいうえお<span class="aka">赤</span></td>

お礼

思い通りにはなりませんでしたが参考になりました。

回答No.1

noname#19206

右寄せとかセンタリングとかはブロックレベル要素を用いますので前後に強制的な改行が入ります。
コレを無理矢理行上げすると言うのは異なる環境間にて表示状態の差異が表示することを考えれば難しいかも…。