html h1转换为行内,css中转换为行内样式的解决方案(css-inline)
聊聊場景
發送郵件
在第三方網站中嵌入HTML
從其他編輯器拷貝編輯好的文章發布到微信、今日頭條等自媒體
在以上場景使用行內樣式的兼容性要高很多,也可以保持原樣式不變
解決方案
這兩種方案功能和 Api 非常相似,這里就以 juice 為例
安裝
npm i juice --save
使用
import juice from 'juice'
const html = `
測試Juice
div{
width: 90%;
height: 500px;
}
const result = juice(html)
console.log(result)
結果
測試Juice
ps:下面看下CSS - 行內塊元素(inline-block)、標簽顯示模式轉換 display
行內塊元素(inline-block)
在行內元素中有幾個特殊的標簽??、、
,可以對它們設置寬高和對齊屬性,有些資料可能會稱它們為行內塊元素。行內塊元素的特點:
(1)和相鄰行內元素(行內塊)在一行上,但是之間會有空白縫隙。
(2)默認寬度就是它本身內容的寬度。
(3)高度,行高、外邊距以及內邊距都可以控制。
標簽顯示模式轉換 display
塊轉行內:display:inline;
行內轉塊:display:block;
塊、行內元素轉換為行內塊: display: inline-block;
總結
到此這篇關于css中轉換為行內樣式的解決方案(css-inline)的文章就介紹到這了,更多相關css行內樣式內容請搜索得牛網以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持得牛網!
總結
以上是生活随笔為你收集整理的html h1转换为行内,css中转换为行内样式的解决方案(css-inline)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: HTML怎么限制每行字数,JS实现每行固
- 下一篇: html怎么让表格连接数据库,【前端】如