我有以下代碼：
.container {
display: flex;
}
@keyframes dotty {
0% { content: ''; }
25% { content: '.'; }
50% { content: '..'; }
75% { content: '...'; }
100% { content: ''; }
}
.loading {
display: flex;
padding: 8px;
background-color: #ddd;
}
.loading::after {
display: inline-block;
animation: dotty steps(1, end) 1s infinite;
content: '';
}<div class="container">
<div class="loading">Loading</div>
</div>如您所見，元素的大小根據顯示的點數增加和減少。
我希望它始終是相同的大小。
我希望它的大小是它可能的最大大小（即當它充滿Loading...文本時）。
我可以通過設定寬度屬性來解決這個問題，但我不知道寬度是什么，我不想硬編碼一個值。
是否可以根據它沒有的子元素來調整元素的大小？我能想到的唯一解決方案是創建一個visibility: hidden包含文本的孩子Loading...，但這似乎有點駭人聽聞。此外，該解決方案在其頂部添加了一條額外的線，因此它甚至也不能很好地作業。
有沒有更好的辦法？
uj5u.com熱心網友回復：
使用white-space: pre;和添加空格而不是點以使內容始終相同
.container {
display: flex;
}
@keyframes dotty {
0% { content: ' '; }
25% { content: '. '; }
50% { content: '.. '; }
75% { content: '...'; }
100% { content: ' '; }
}
.loading {
display: flex;
padding: 8px 0px 8px 8px;
background-color: #ddd;
width: 10ch;
}
.loading::after {
display: inline-block;
animation: dotty steps(1, end) 1s infinite;
white-space: pre;
content: '';
}<div class="container">
<div class="loading">Loading</div>
</div>uj5u.com熱心網友回復：
評論后編輯的解決方案：
.container {
display: flex;
}
@keyframes dotty {
0% { content: ''; }
25% { content: '.'; }
50% { content: '..'; }
75% { content: '...'; }
100% { content: ''; }
}
.loading {
display: flex;
padding: 8px 0px 8px 8px;
background-color: #ddd;
width: 10ch;
}
.loading::after {
display: inline-block;
animation: dotty steps(1, end) 1s infinite;
content: '';
}<div class="container">
<div class="loading">Loading</div>
</div>uj5u.com熱心網友回復：
為什么不給 .loading 添加一個 width:100px 呢？
.container {
display: flex;
}
@keyframes dotty {
0% { content: ''; }
25% { content: '.'; }
50% { content: '..'; }
75% { content: '...'; }
100% { content: ''; }
}
.loading {
display: flex;
padding: 8px;
background-color: #ddd;
width:100px;
}
.loading::after {
display: inline-block;
animation: dotty steps(1, end) 1s infinite;
content: '';
}<div class="container">
<div class="loading">Loading</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/454951.html