首頁猿問 CSS - 調整大小時防止文本移動

CSS - 調整大小時防止文本移動

JavaScript

郎朗坤 2021-10-21 15:42:14

我有這個簡單的 HTML DIV，中間有“加載”這個詞。我還有用于更改#waitDotDotDot元素中點的 JavaScript 代碼。var dots = window.setInterval( function() { var wait = document.getElementById("waitDotDotDot"); if ( wait.innerHTML.length > 5 ) wait.innerHTML = ""; else wait.innerHTML += ".";}, 300);<div style="width: 90%; text-align:center; margin-right:auto; margin-left:auto; border: 1px solid black;"> <div style="margin-right:auto; margin-left:auto; width:90%;"> Loading <span id="waitDotDotDot">.</span> </div></div>這是有效的，但是當點數增加時，它會不斷調整“正在加載”文本的大小（將其向左推）。有沒有辦法將“正在加載”文本保持在同一位置（仍然居中），但只有點在增加時會調整大?。?

查看完整描述

2 回答

慕蓋茨4494581

TA貢獻1850條經驗獲得超11個贊

對于這種效果，我個人會放棄腳本以保持簡單并同時解決問題。

.container {

border: green 1px dashed;

}

.dotme {

margin-left: calc(50% - 4rem);

transform: translateX(-50%);

display: inline;

font-size: 2rem;

border: red 1px dotted;

}

.dotme:after {

content: "\2026";

display: inline-block;

width: 0;

overflow: hidden;

vertical-align: bottom;

animation: dots steps(4,end) .75s infinite alternate;

}

@keyframes dots {

to { width: 3rem;}

}

<aside class="dotme">Loading</aside>

</div>

反對回復 2021-10-21

慕村9548890

TA貢獻1884條經驗獲得超4個贊

我修改了 Chris W. 的帖子以達到預期的結果。

.divWrapper {

width: 100%;

text-align: center;

}

.loading {

font-size: 2rem;

display: inline-block;

}

.dots {

visibility: hidden;

position: relative;

}

.dots::before {

content: "\2026";

visibility: visible;

display: inline-block;

position: absolute;

width: 0;

overflow: hidden;

vertical-align: bottom;

animation: dots steps(4,end) 1s infinite forwards;

}

@keyframes dots {

to { width: 2.5rem;}

}

Loading<span class="dots">…</span>

</p>

</div>

反對回復 2021-10-21

2 回答
0 關注
294 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

CSS - 調整大小時防止文本移動

CSS - 調整大小時防止文本移動

2 回答

添加回答