No.5ベストアンサー
- 回答日時:
案1. 長い文字列を固定幅40%の枠に溢れなしで表示
<span>開</span><i class=spacer>-------></i><span>終</span>
.spacer {
font-style:normal;
display:inline-block; vertical-align:middle; width:40%;
white-space:nowrap; overflow:hidden; text-overflow:'>';
}
案2. 案1の長い文字列を疑似要素にする
<span>開</span><i class=spacer></i><span>終</span>
.spacer::after {
display:inline-block; vertical-align:middle; width:40%;
white-space:nowrap; overflow:hidden; text-overflow:'>';
content:'--------------------------------------------------->';
}
案3. フレキシブル配置で全体が50%になるように拡大縮小
<div class=fixarrow>
<span>開</span>
<i class=spacer>----------------------------------------></i>
<span>終</span>
</div>
.fixarrow { display:inline-flex; width:50%; }
.fixarrow * { flex:0 0 auto; } /* 固定 */
.fixarrow .spacer {
flex:1 1 auto; /* 拡大縮小 */
white-space:nowrap; overflow:hidden; text-overflow:'>';
}
No.4
- 回答日時:
>start-|->->->->->->->|-stop
>は実はstart-|は簡単のために固定長になっていますがstart-|ではなく
>いろいろ長さが変わる変数名です5から30文字の長さで変るのです
>だから->->->->->->->はその長さに応じて伸び縮みしなればならないのです
>それによって|-stopが右に動いてはならないのです
>左側に多少の隙間は許容します
つまり、プログレスバーのようなものをテキストでやりたい、ということですかね?Unix系のシェル上で動かすアプリケーションみたいに。
そんな面倒なことをしなくても、progressというHTML要素を使えば実現できます。
あとは進行の度合いをJavaScriptで制御すれば簡単にできます。
https://lorem-co-ltd.com/progress-basic/
No.3
- 回答日時:
"->"がHTML要素として認識されているからうまく行ってないのでは?
全角に置き換えるか、">"をエスケープ文字で置き換えてみましょう。
https://qiita.com/turmericN/items/8c635b3a0610dc …
start-|->->->->->->->|-stop
は実はstart-|は簡単のために固定長になっていますがstart-|ではなく
いろいろ長さが変わる変数名です5から30文字の長さで変るのです
だから->->->->->->->はその長さに応じて伸び縮みしなればならないのです
それによって|-stopが右に動いてはならないのです
左側に多少の隙間は許容します
No.2
- 回答日時:
訂正
<!-- <span style="display:inline-block;width:50%"><span>strart-|</span><span>...</span><span>|-stop</span></span> -->
"..."をspan要素で囲い、"|-stop"を囲うspan要素の後に最初のspan要素の終端を追加すればいいです。
要素で囲う場合、先端と終端の数があっているかを確認しましょう。
->の数が指定できないので不可能かもしれません
矢印画像を作ってbackground-repeatなどの使用が必要かもしれません
No.1
- 回答日時:
何を言っているのかよくわかりません。
普通に
<!-- <span style="display:inline-block;width:50%"><span>strart-|</span>...</span><span>|-stop</span></span> -->
とすればいいです。
一番最初のspan要素の終端が足りません。
それではダメだと言いたいんですかね?
回答ありがとうございます
start-|->->->->->->->|-stop
の表示がしたいのです
ただし|と|の間が一定(40%程度)です
->の数を指定しないので自動的に増減されていればいいのです
多すぎると|-stopが右に移動しますし少なすぎると空白の隙間ができます
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS htmlのstyleのposition:relativeとpoition:abusoluteと無指定 2 2023/12/23 16:53
- HTML・CSS 初心者html・CSS ウィンドウを縮小するとタグの一部が隠れてしまう。 1 2023/12/18 19:52
- Java 次のhtml・cssでspan内の文字を点滅させるには、どのようにしたらよいのでしょうか。 1 2023/11/26 16:47
- HTML・CSS スライダーの枠に動画を収めるにはどのように修正すれば良いでしょうか? 1 2024/08/10 20:23
- HTML・CSS HTMLですCSSです 画像のように作りたいのですが 以下のようにあってますか?間違ってる感じがしま 3 2023/12/24 16:15
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS HTMLで特定の文字だけ色を変えたいのですが、指定した色と違う色が反映してしまいます。 下記、「前」 5 2023/06/27 12:08
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
このQ&Aを見た人はこんなQ&Aも見ています
-


以下のプログラムの実行結果はどうなると思いますか? その理由も教えてください。
Visual Basic(VBA)
-


HTML、javascriptでウェブサイトを制作してガチャシステムを導入したいと考えております。
HTML・CSS
-


html 階層を下げると3分割画面が1画面になる
HTML・CSS
-
-
4

算術演算子「¥」の意味について
Visual Basic(VBA)
-
5

10進数から2進数に変換 例 185 185÷2=92.5 小数点以下切り捨て 91と勘違いしてしま
その他(プログラミング・Web制作)
-
6

⚠️至急です!⚠️ Yahoo!知恵袋の自動回答ツールを作成しようと思ったらお金はかなりかかりますか
その他(プログラミング・Web制作)
-
7

至急助けてください!!!あと2時間しかないです! ボタンを押したら0ランプが点灯し、コンマ5秒後に1
その他(プログラミング・Web制作)
-
8

Visualbasicの現状について教えてください
Visual Basic(VBA)
-
9

添付URLの様なサイトを作るにはどうすればいいですか?※どんな技術が使われていますか
その他(プログラミング・Web制作)
-
10

VB.net 文字列から日付型へ変更したい
Visual Basic(VBA)
-
11

Webサイトの「デザインのみ(コーディング不要)」を依頼されました。 「レスポンシブデザイン」を希望
HTML・CSS
-
12

C言語について(初心者)
C言語・C++・C#
-
13

ラジオボタンを複数選択したときの条件分岐をしたい
JavaScript
-
14

プログラム上での行のマージ方法
その他(プログラミング・Web制作)
-
15

index.htmlがうまく反映されない
HTML・CSS
-
16

VBAの「To」という語句について
Visual Basic(VBA)
-
17

プログラマー達は何故、プログラムを入れるフォルダーに容量制限があるのを知らない?
C言語・C++・C#
-
18

Dreamweverは今も主流なんですか? 昔使われてたツールだって言う人もいたけど、殆どの会社はこ
HTML・CSS
-
19

改行文字「vbCrLf」とは
Visual Basic(VBA)
-
20

AIがプログラムする時代のプログラマー不要論の相違について
その他(プログラミング・Web制作)
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
テーブルの行を折りたたみたい...
-
HTML/CSSを使って写真のような...
-
スマホ(android)のタッチパネ...
-
初心者html・CSS ウィンドウを...
-
ホームページの制作について教...
-
CSSデータの作成方法について(...
-
メモ帳の段落の揃え方
-
HTMLタグのあるCSVファイルを利...
-
WEBページを強制的に横画面で見...
-
css初心者 フレックスボックス...
-
テーブルタグのセルの幅の一部...
-
HTMLでクロス抽出したい
-
レスポンシブで困っています・・
-
GoogleSearchControlにホームペ...
-
htmlの<input type=”file”>でア...
-
Webサイトの「デザインのみ(コ...
-
webディベロッパーについて詳し...
-
CSSを教えて下さい webデザイナ...
-
静止画画像をクリックすると音...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
テーブルの行を折りたたみたい...
-
レスポンシブで困っています・・
-
HTMLでクロス抽出したい
-
iPhoneで HTMLファイルを閲覧
-
HTML/CSSを使って写真のような...
-
ホームページの制作について教...
-
スマホでHTMLファイルを開いて...
-
GoogleSearchControlにホームペ...
-
メモ帳の段落の揃え方
-
css初心者 フレックスボックス...
-
スマホ(android)のタッチパネ...
-
WEBページを強制的に横画面で見...
-
角丸画像の背景色を透明にした...
-
、URL化させるにはどうしたらい...
-
HTMLタグのあるCSVファイルを利...
-
静止画画像をクリックすると音...
-
テーブルのセルデータを自動改...
-
テーブルタグのセルの幅の一部...
-
スマホで、左右にスワイプして...
おすすめ情報








