2017-09-20 1 views
0

Ich sah sich ein paar Foren über CSS-Fragen, aber ich konnte nicht etwas spezifisch genug finden, also hier gehen wir!Entfernen/ersetzen Sie mehrere Leerzeichen mit Browser-Stilen

Ich benutze Jenkins und wenn ich ein Produktion/Test-Diff erzeuge, kommt es mit seiner eigenen Formatierung heraus. Leider, weil es Räume benutzt, um verschiedene Spalten innerhalb einer Tabelle aufzuspalten, wird das Extrahieren der Daten irgendwie ärgerlich (Anzahl der Räume unterscheidet sich abhängig von der Menge des Tests).

Gibt es eine Möglichkeit, durch Eingabe von CSS-Stilen direkt in meinem Browser mehrere Leerzeichen durch ein ";" zu ersetzen?

Hier ist ein kleines Beispiel zu erklären:

690621    0.25   None  None     0 
8701820    0.25   None  None     0 

und hier ist es, was würde Ich mag:

690621;0.25;None;None;0 
8701820;0.25;None;None;0 

Ist es überhaupt möglich? und wenn ja, was wäre der beste Weg, um fortzufahren? Idealerweise wäre es eine Lösung, die während des Trainings in einem Prozess gegeben werden kann (etwas, das zum Beispiel leicht kopiert und eingefügt werden kann).

Vielen Dank Jungs!

+0

Gibt es einen Grund, warum Sie nicht JS verwenden kann? – Jonathan

+1

Nicht mit CSS..no denke ich nicht. CSS kann nichts ersetzen. Es kann nur stilisieren, was da ist. Ist es das Einfügen von nicht-brechenden Leerzeichen oder etwas, weil normalerweise Whitespace automatisch so zusammenfaltet. –

+0

Es gibt Gründe, warum ich die jenkins-Ausgabe selbst nicht bearbeiten kann (Tool, das nicht zu meiner Firma gehört). Aber im Grunde enthält die HTML-Ausgabe die Räume: „06:15:57 19318622 4486620“ Da ich es vor nicht wirklich bearbeiten, ich frage mich, ob es möglich war, einige Änderungen im Stil, so Windows-Zwischenablage würde greifen, was ich brauche, im richtigen Format, anstatt mit gazilions von Leerzeichen :) CSS schien der einfachste Weg, um für mich zu gehen, aber wenn Sie eine andere Lösung haben, bin ich offen zu Vorschlägen. – Pomdeterre

Antwort

0

Wenn Sie es wirklich nicht mit JS tun können, können Sie es hacken, indem Sie den Code in einen Container setzen und die Schriftgröße des Containers auf "0" setzen. Stellen Sie dann die Schriftgröße der Elemente auf die von Ihnen gewünschte Größe ein.

Verwenden Sie dann den Pseudo-Selektor :after, um die Semikolons nach jedem Element hinzuzufügen. Führen Sie das folgende Snippet aus.

Hinweis: Da all diese Bereiche von Leerzeichen eine Klasse haben, könnten Sie auch die Anzeige für diese Klasse in der CSS auf "none" setzen. Das einzige Problem besteht darin, dass zwischen jedem Element ein Leerzeichen liegt, da es sich um separate Inline-Elemente handelt. Wenn es Ihnen nichts ausmacht (oder wenn Sie ein Leerzeichen möchten), wäre das ein anderer Weg.

.container { 
 
    font-size: 0; 
 
} 
 
.kwd, .lit { 
 
    font-size: 16px; 
 
} 
 
.kwd:not(:last-of-type):after, .lit:not(:last-of-type):after { 
 
    content:';'; 
 
}
<div class="container"> 
 
    <span class="lit">690621</span> 
 
    <span class="pln">    </span> 
 
    <span class="lit">0.25</span> 
 
    <span class="pln">   </span> 
 
    <span class="kwd">None</span><span class="pln">  </span> 
 
    <span class="kwd">None</span><span class="pln">    </span> 
 
    <span class="lit">0</span> 
 
    <span class="pln"></span> 
 
    <span class="lit">8701820</span> 
 
    <span class="pln">    </span> 
 
    <span class="lit">0.25</span> 
 
    <span class="pln">   </span> 
 
    <span class="kwd">None</span> 
 
    <span class="pln">  </span> 
 
    <span class="kwd">None</span> 
 
    <span class="pln">     </span> 
 
    <span class="lit">0</span> 
 
</div>

Verwandte Themen