css in ionic und phonegap mit Boxen

Question

Ich mache ein kleines Quiz in ionischen und ich dynamisch die Boxen mit n-g-Wiederholung für die Antworten erstellen. Ive Biene versucht stundenlang, aber es funktioniert entweder gut auf iPad, aber schwer auf dem iPhone oder umgekehrt. Hier ist, wie es auf meinem Handy aussieht:

und hier auf meinem ipad

Alle im versucht zu tun ist haben ein Objekt mit einer Antwort so zum Beispiel „über die Stimmung“ und dynamisch erstellen die Boxen, die mit der Antwort corespond mit so für dieses Beispiel [] [] [] [] [] [] [] [] [] [] [] ..

Ich verwende ng-repeat, um was zu tun Ich habe in meinem Beispiel:

<form> 
<span ng-repeat="content in answerArr track by $index" class="single-input"><span style="margin-right:10px;"></span><!--this adds space --> 
<div class="testingg" style="width:50%;margin-right:auto;"> 
<div style="width:50%;margin-right:auto;margin-left:auto;"> 
<span class="single-input" ng-repeat="contentt in content track by $index"> 

<div class="row"style=""> 
      <span ng-if="$index < content.length"> 
       <div class="box single-number" style=""> 
        <input type="text" class="" focus maxlength="1"> 
       </div> 
      </span> 
      </div> 
</div> 
</span> 
</div> 
</span> 
</form> 

Gibt es einen besseren Weg dies zu tun oder fehlt mir etwas Offensichtliches? im Versuch, die Art von zentrierte CSS zu erreichen, wo, wenn das Wort überlappt dann in der nächsten Zeile geht .. so etwas wie die folgenden

althought sie verwenden __, und ich bin mit einem Kasten. Kann jemand helfen?

Answer 1

Nun, Sie können eine bestimmte Länge für Ihre Zeilen festlegen. Und mit Länge der Antwort erstellen Teilstrings von tho und schieben sie in ein beliebiges Objekt.Wenn, wenn die Zeile Länge 5 ist und Ihre Antwort ist "über die Stimmung". Sie müssen 3 Teilstrings erstellen und sie in Objekt schieben. Jetzt implementieren Sie eine verschachtelte ng-repeat, zuerst mit das Objekt enthält Teilzeichenfolge und dann innerhalb der mit Teilzeichenfolge selbst Hope Es wird Ihnen helfen :)