syareen syareen - 8 months ago 30
iOS Question

how to make full scrolling text - ios

Once I open the application, there will have a scrolling text. I would like to make it scroll the whole text. what just happening, it just scrolling a part of the text. If i count the text included the spacing. It just appear until 100 words. I just want it to scrolling the whole words. what should i do?

Here is my code. (style.xml)

.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%);
}
}


Here is my html. (a.html)

<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>


this is my codepen

Answer

Please add white-space property to your p tag with !important:

.scroll-left p {
    white-space: nowrap !important;
}

This property tells your browser how to handle white spaces inside the element. When using nowrap value, sequences of whitespace collapse into a single whitespace and text does not wrap to the next line. It continues on the same line until a <br> tag is encountered.

And using !important will override other values being set by other classes. In your particular case, white-space: normal; is being set by the iconic framework. You can check it using developer tools in your browser. This is how I solved this issue.