Solution for converting to inline styles in CSS (css-inline)

Talk about the scene

• Send Email
• Embedding HTML in third-party websites
• Copy and edit articles from other editors and publish them to We Media such as WeChat and Toutiao

In the above scenarios, the compatibility of using inline styles is much higher, and the original style can also be kept unchanged.

Solution

• juice
• inline-css

The functions of these two solutions are very similar to Api . Here we take juice as an example.

Install

npm i juice --save

use

import juice from 'juice'
const html = `
<div class="test"><h1>Test Juice</h1></div>
<style>
div{
    width: 90%;
    height: 500px;
}
</style>
const result = juice(html)
console.log(result)

result

<div style="width: 90%; height: 500px;">
<h1>Testing Juice</h1>
</div>

ps: Let's take a look at CSS - inline-block elements (inline-block), label display mode conversion display

Inline-block elements
There are several special tags in the inline elements - <img />, <input />, <td>, you can set their width, height and alignment attributes, some materials may call them inline block elements.

Features of inline block elements:
(1) On the same line as adjacent inline elements (inline blocks), but with a blank space between them.
(2) The default width is the width of its content.
(3) Height, line height, margins, and padding can all be controlled.

Label display mode conversion display
Block inline: display:inline ;

Inline block: display:block ;

Block and inline elements are converted to inline blocks: display: inline-block block;

Summarize

This is the end of this article about the solution to convert inline styles in CSS (css-inline). For more relevant CSS inline style content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!