htmlで"start-|"から"|-stop"までを"->"で埋めたいのですが両端の位置は不変にし

たいのですがどうしたらいいでしょうか？
<span style="display:inline-block;width:50%"><span>strart-|</span>...</span><span>|-stop</span>
において...を"->"多く埋めすぎると幅が大きくなります
自動的に幅が変わらないように埋める"->"の数をできるだけ多く設定する方法はあるでしょうか？

No.5 ベストアンサー 回答者： Ogre7077 回答日時： 2024/12/28 17:30

案1. 長い文字列を固定幅40%の枠に溢れなしで表示

<span>開</span><i class=spacer>-------&gt;</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>----------------------------------------&gt;</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:'>';
}

この回答へのお礼

ありがとうごじあす
案3が使えそうです

お礼日時：2024/12/28 19:27

No.4 回答者： rera1016 回答日時： 2024/12/28 16:55

>start-|->->->->->->->|-stop

>は実はstart-|は簡単のために固定長になっていますがstart-|ではなく
>いろいろ長さが変わる変数名です5から30文字の長さで変るのです
>だから->->->->->->->はその長さに応じて伸び縮みしなればならないのです
>それによって|-stopが右に動いてはならないのです
>左側に多少の隙間は許容します

つまり、プログレスバーのようなものをテキストでやりたい、ということですかね？Unix系のシェル上で動かすアプリケーションみたいに。

そんな面倒なことをしなくても、progressというHTML要素を使えば実現できます。
あとは進行の度合いをJavaScriptで制御すれば簡単にできます。
https://lorem-co-ltd.com/progress-basic/

No.3 回答者： rera1016 回答日時： 2024/12/28 15:52

"->"がHTML要素として認識されているからうまく行ってないのでは？

全角に置き換えるか、">"をエスケープ文字で置き換えてみましょう。
https://qiita.com/turmericN/items/8c635b3a0610dc …

この回答へのお礼

start-|->->->->->->->|-stop

は実はstart-|は簡単のために固定長になっていますがstart-|ではなく
いろいろ長さが変わる変数名です5から30文字の長さで変るのです
だから->->->->->->->はその長さに応じて伸び縮みしなればならないのです
それによって|-stopが右に動いてはならないのです
左側に多少の隙間は許容します

お礼日時：2024/12/28 16:11

No.2 回答者： rera1016 回答日時： 2024/12/28 14:54

訂正

<!-- <span style="display:inline-block;width:50%"><span>strart-|</span><span>...</span><span>|-stop</span></span> -->

"..."をspan要素で囲い、"|-stop"を囲うspan要素の後に最初のspan要素の終端を追加すればいいです。

要素で囲う場合、先端と終端の数があっているかを確認しましょう。

この回答へのお礼

->の数が指定できないので不可能かもしれません
矢印画像を作ってbackground-repeatなどの使用が必要かもしれません

お礼日時：2024/12/28 15:31

No.1 回答者： rera1016 回答日時： 2024/12/28 14:51

何を言っているのかよくわかりません。

普通に

<!-- <span style="display:inline-block;width:50%"><span>strart-|</span>...</span><span>|-stop</span></span> -->

とすればいいです。
一番最初のspan要素の終端が足りません。

それではダメだと言いたいんですかね？

この回答へのお礼

回答ありがとうございます
start-|->->->->->->->|-stop
の表示がしたいのです
ただし｜と|の間が一定(40%程度）です
->の数を指定しないので自動的に増減されていればいいのです
多すぎると|-stopが右に移動しますし少なすぎると空白の隙間ができます

お礼日時：2024/12/28 15:27