Html 如何制作完整的滚动文本-ios

一旦我打开应用程序，就会有一个滚动文本。我想让它滚动整个文本。刚刚发生的事情，只是滚动文本的一部分。如果我算上包含空格的文本。直到100字才出现。我只想让它滚动整个单词。我该怎么办

这是我的密码。（style.xml）

这是我的html。（a.html）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 17 18 19 20 21 22 23 24 25 26 27 28 30 31 32 34 36 37 38 39 40 41 42 44 45 46 48 49 50 51 52 54 55 56 57 58 59 60 62 64 65 67 67 69 70 71 72 74 75 77 78 80 81 82 84 86 88 90 91 92 94 96 97 98 99 100 10 10 10 10 10 10 10 110

这是我的请用

将属性添加到您的
p
标签中！重要信息

：

。向左滚动p{
空白区：nowrap！重要；
}

此属性告诉浏览器如何处理元素内的空白。使用

nowrap

value时，空格序列会折叠为单个空格，文本不会换行到下一行。它在同一行上继续，直到遇到

标记

---

并使用

！重要信息

将覆盖其他类设置的其他值。在您的特定情况下，

空白：正常由图标框架设置。您可以在浏览器中使用进行检查。这就是我解决这个问题的方法。
它在我的代码笔中工作，但当我在我的应用程序（离子框架）中使用它时，它就像空白：nowrap！重要的是真的要做工作：）谢谢。但另一个问题来了。所以我需要提出另一个问题。
.scroll-left {
    height: 50px;
    overflow: hidden;
    position: relative;
}

.scroll-left p {
    width: 100%;
    height: 100%;
    margin: 0;
    line-height: 50px;
    /* Apply animation to this element */
    -moz-animation: scroll-left 10s linear infinite;
    -webkit-animation: scroll-left 10s linear infinite;
    animation: scroll-left 10s linear infinite;
}

@-moz-keyframes scroll-left {
    0% {
        -moz-transform: translateX(100%);
    }
    100% {
        -moz-transform: translateX(-100%);
    }
}

@-webkit-keyframes scroll-left {
    0% {
        -webkit-transform: translateX(100%);
    }
    100% {
        -webkit-transform: translateX(-100%);
    }
}

@keyframes scroll-left {
    0% {
        -moz-transform: translateX(100%);
        /* Browser bug fix */
        -webkit-transform: translateX(100%);
        /* Browser bug fix */
        transform: translateX(100%);
    }
    100% {
        -moz-transform: translateX(-100%);
        /* Browser bug fix */
        -webkit-transform: translateX(-100%);
        /* Browser bug fix */
        transform: translateX(-100%);
    }
}

<div class="scroll-left">
  <p>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110
  </p>
</div>