我想要使用下面提到的css動畫，但是它在移動瀏覽器中突然崩潰，因爲我已經將溢出作爲隱藏空白和空白作爲動畫的一部分。爲手機瀏覽器定製的css動畫破解
p{
color: black;
white-space: nowrap;
overflow: hidden;
width: 100%;
animation: type 5s steps(60, end);
opacity: 0;
}
@keyframes type{
from { width: 0; opacity:1;}
to { opacity:1;}
這是代碼https://jsfiddle.net/ed8nuf76/
如果你仔細看，完整的句子是不是在移動瀏覽器，甚至在小提琴呈現的jsfiddle，文字的寬度達到100％後，截斷而不是將其溢出到第二行。
任何方式來解決這個問題？
如果你想解決這個不涉及JavaScript中，可以使用下面的純CSS方法 - 但它的工作，你需要知道有多少行內容佔用（因爲CSS本身不能從計算上得出這個結果）。
正如你可以在下面的例子中看到的，如果你知道你的內容佔用了3行，你也知道，每行的24px一個line-height你可以告訴大家，含div應該24px高大的動畫開始，48px高1秒後，72px高高的另一秒後，最後96px高。
然後，您可以用不透明的::after僞元素隱藏div中最小的可見行，並給僞元素1秒animation，其中每次重複三次，其中僞元素的寬度從300px縮減爲0，顯示下方的文字。
工作實例：
p {
margin-left: 6px;
font-size: 16px;
line-height: 24px;
white-space: nowrap;
overflow-x: hidden;
overflow-y: hidden;
animation: type 3s;
}
div {
position: relative;
width: 300px;
height: 96px;
padding: 0 6px;
overflow: hidden;
animation: growTaller 3s step-end;
}
div p {
margin: 0;
padding: 0;
font-size: 16px;
line-height: 24px;
white-space: normal;
overflow-x: hidden;
overflow-y: visible;
animation: none;
}
div::after {
content: '';
display: block;
position: absolute;
bottom: 0;
right: 0;
z-index: 6;
width: 312px;
height: 24px;
background-color: rgb(255,255,255);
animation: typeFaster 1s linear 3;
}
@keyframes type {
from {width: 0;}
to {width: 100%;}
}
@keyframes typeFaster {
from {width: 312px;}
to {width: 0;}
}
@keyframes growTaller {
0% {height: 24px;}
33.33% {height: 48px;}
66.66% {height: 72px;}
100% {height: 96px;}
}<p>Hi folks, this is typing animation using CSS, I want this to run in mobile browsers without breaking.</p>
<div>
<p>Hi folks, this is typing animation using CSS, I want this to run in mobile browsers without breaking. Using this method, it works!</p>
</div>問題不在於移動瀏覽器本身，它只是連接到它，因爲一件簡單的事情：width的空間。
在您的示例中，文本容器的寬度將由正在使用的文本的長度決定，這意味着即使您將width設置爲100%，仍受瀏覽器設備總寬度的限制。另外，CSS3只是不知道如何管理邏輯來打破界限。
最好的解決辦法：去JavaScript和讓它處理這個邏輯的東西。
我們擁有的，在一個簡單而有效的方式管理這個很好的選擇一個布赫：
這是很好的，但我不希望使用庫幾行！ –
完美！使用CSS –