Lösung zur Konvertierung in Inline-Styles in CSS (css-inline)

Sprechen Sie über die Szene

• E-Mail senden
• Einbetten von HTML in Websites von Drittanbietern
• Kopieren und bearbeiten Sie Artikel von anderen Redakteuren und veröffentlichen Sie sie in We Media wie WeChat und Toutiao

In den oben genannten Szenarien ist die Kompatibilität bei der Verwendung von Inline-Stilen viel höher und der ursprüngliche Stil kann auch unverändert beibehalten werden.

Lösung

• Saft
• Inline-CSS

Die Funktionen dieser beiden Lösungen sind der Api sehr ähnlich. Hier nehmen wir juice als Beispiel.

Installieren

npm ich Saft --save

verwenden

Saft aus 'Saft' importieren
const html = `
<div class="test"><h1>Testsaft</h1></div>
<Stil>
div{
    Breite: 90%;
    Höhe: 500px;
}
</Stil>
const Ergebnis = Saft (html)
console.log(Ergebnis)

Ergebnis

<div style="Breite: 90%; Höhe: 500px;">
<h1>Saft testen</h1>
</div>

ps: Werfen wir einen Blick auf CSS - Inline-Block-Elemente (Inline-Block), Anzeige der Konvertierungsanzeige für den Beschriftungsanzeigemodus

Inline-Block-Elemente
Es gibt mehrere spezielle Tags in den Inline-Elementen – <img />, <input />, <td>, Sie können deren Breite, Höhe und Ausrichtungsattribute festlegen, einige Materialien nennen sie möglicherweise Inline-Blockelemente.

Funktionen von Inline-Blockelementen:
(1) In der gleichen Zeile wie benachbarte Inline-Elemente (Inline-Blöcke), aber mit einem Leerzeichen zwischen ihnen.
(2) Die Standardbreite ist die Breite des Inhalts.
(3) Höhe, Zeilenhöhe, Ränder und Polsterung können alle gesteuert werden.

Anzeige der Konvertierung des Beschriftungsanzeigemodus
Inline-Block: display:inline ;

Inline-Block: display:block ;

Block- und Inline-Elemente werden in Inline-Blöcke umgewandelt: display: inline-block Block;

Zusammenfassen

Dies ist das Ende dieses Artikels über die Lösung zum Konvertieren von Inline-Styles in CSS (css-inline). Weitere relevante Inhalte zu CSS-Inline-Styles finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!