border-bottomの線にのみテキストを入れる

Question

初めまして。htmlについて勉強をしているのですが、border-bottomを使用していて、文字を入れて線を越えると2段になってしまうのですが、文字を線に収めることはできますか？文字が多くなった場合はスクロールで対応したいと思っています。アドバイスいただきたいです。よろしくお願いします。

<div class="text-num1">あああ</div> 
<div class="text-num2">あああ</div> 
<div class="text-num3">あああ</div>

.text-num1{ 
position:relative; margin-top:120px; 
margin-right:120px 
border-top:inset 1px #000000; 
border-bottom:inset 1px #000000; l
ine-height:40px; min-height:40px;
} 
.text-num2{ position:relative; 
margin-right:200px; 
border-bottom:inset 1px #000000; 
line-height:40px;min-height:40px;
}
 .text-num3{
 position:relative; margin-right:200px; border-bottom:inset 1px #000000; 
line-height:40px; min-height:40px;
}

Comments

[退会済みユーザー]

とりあえず CSS構文エラーで途中から読み込まれてない

Answer 1

文字の部分だけに下線をつけたいなら以下のようにすればできます。
折り返しさせずにスクロールさせたいのなら、white-space指定します。折り返したほうがいいと思いますが。

.text-num1 { 
...
display: inline;
white-space: nowrap;
} 

Answer 2

1行でスクロールというのも少々無理がある気もしますが。。。

.text-num1{ 
min-height:40px; /* 削除 */
height:40px; /* 追加 */
overflow-y: auto; /* 追加 */
} 

これで、2行(40px)以上の場合はスクロールになります^^

Comments

[paruru]

ありがとうございます上手くいきました。
確かに1行だけでのスクロールは違和感ありますね、、
text-num1～3まで文字が埋まったらスクロールさせることってできるんでしょうか？

[-millmill-]

最終的にどのような形にしたいのかが分からないので
何ともなんですが、、、

例えば
text-num1～3までのheightは全て無くして
<div class="wrap">
<div class="text-num1">あああ</div>
<div class="text-num2">あああ</div>
<div class="text-num3">あああ</div>
</div>
として、
.wrap {
height: 130px; /* サイズは適当です^^;; */
overflow-y: auto;
}
とすれば 3個まとめてでのスクロールにはなりますが。。。

違うような気も _ _;;

[paruru]

返信ありがとうございます！
今テキストに直接「あああ」を入力してるんですけど、最終的にはスクリプトを使って文字を入れていくということをしようと思っています。text-num1～3で作っている行は元から表示しておいて、text-num1から順に文字を入れていって、埋まったら一番最初の文字からnum2入れていく(新しい文字自体はnum1の最初からずっと追加)進めて、num3まで全部埋まったら画面自体は動かさずにスクロールによって行を追加していくようにやりたいです。この場合はまとめてやる？みたいになるのでしょうか？
説明わかりづらくて申し訳ありません。

[-millmill-]

自動で1行ごとの段組み、って事ですね

でしたら上で書いたように
まとめラップさせて
ラップをスクロールさせるというやり方で
よいのでは、と思います。

スクリプトで段(div)を追加させるのなら
ラップがあった方が指定しやすいと思いますし^^

[paruru]

ありがとうございます試してみます！
もうひとつ質問したいんですけど、その場合はtext-numのcssってheightの部分だけ消すんでしょうか？margin-rightとかも消す必要になりますか？

[-millmill-]

.text-num1だけ margin-right:120px となっているのですが
ここだけmargin-right が違うのでしょうか??

もし書き間違えで text-num1～3 の margin-right が共通でしたら
ラップにかけてしまった方が分かりやすいですし
メンテナンスも楽だと思いますよ^^

書き間違えでなければ
wrap ⇒ margin-right:120px
text-num1 ⇒ margin-right:0
text-num2、3 ⇒ margin-right:160px
というやり方でも良いかと思います

[paruru]

返信ありがとうございます！すいません書き間違えていました。また、divの使い方がまだ理解しきれていないとかもしれません。同じ部分はwrapにまとめていくって感じですかね？何度も質問してしまいすいません。

[-millmill-]

ラップ (今回は div) は 箱だと思ってください。
例えていえば、
ラップ (div) は筆箱、その中に 鉛筆(p) を並べるって感じですね。
で、筆箱(div) = 親、中身(pとか) = 子 と呼びます。

スタイルの当て方ですが、、
ざっくり言うと

--------------
大きさや距離に関わるもの( widthとかmargin )は
親にかければ親だけ、子かければ子だけ、
とそれぞれに適用されます。
今回のように 1つのまとまり全体にまとめてmarginなどを適用させたい場合は親に指定します
--------------
colorやline-heightなど
文字や装飾に関わるものは
親から子に継承される場合が多いです。
(親にかけたら、子も同じものが適用される)
文字色とか行間を同じにする場合も親にかけておくと1箇所で済むのでメンテナンスが楽になります
--------------

親子間の継承ってのは色々あるので
色々試したり、調べてもらった方が良いと思います^^

[paruru]

詳しくありがとうございます！もう少し勉強しつつ試してみます！何度もありがとうございました！

Answer 3

こんにちは。
こういうことですか？

.text-num1{ 
position:relative; margin-top:120px; 
margin-right:120px 
border-top:inset 1px #000000; 
border-bottom:inset 1px #000000; line-height:40px; min-height:40px;

  width: max-content;
  min-width: calc( 100% - 120px );

} 
.text-num2{ position:relative; 
margin-right:200px; 
border-bottom:inset 1px #000000; 
line-height:40px;min-height:40px;

  width: max-content;
  min-width: calc( 100% - 200px );

}
 .text-num3{
 position:relative; margin-right:200px; border-bottom:inset 1px #000000; 
line-height:40px; min-height:40px;

  width: max-content;
  min-width: calc( 100% - 200px );

}