請教大佬引用塊圓角css，換行的問題？（預覽模式）

Greyson · 2023 年6 月 5 日 08:22

遇到的问题

例如引用塊若使用圓角的CSS時，我若將下面的文本做成引用塊，

預覽模式會變成這樣，因為文本有使用 Enter 鍵換行

预期的效果

請問有沒有辦法讓它變成這樣？

目前我使用的css

div.HyperMD-quote.HyperMD-quote-1.cm-line {
 padding:20px 20px 20px 50px !important;
 margin-left:30px !important;
 border-radius:0 1rem 1rem 0;
 box-shadow: 5px 5px #000e1c60;
}

已尝试的解决方案

目前是在每行後面加入<br>，但覺得很麻煩，請教各位大佬是否可用 css 解決？謝謝

bedrock · 2023 年6 月 5 日 13:24

div.HyperMD-quote.HyperMD-quote-1.cm-line {
    padding:20px 20px 20px 50px !important;
    margin-left:30px !important;
    box-shadow: 5px 0 #000e1c60;
}
.cm-line.HyperMD-quote:has(+.cm-line:not(.HyperMD-quote)) {
    border-radius: 0 0 1rem 0;
    box-shadow: 5px 5px #000e1c60;
}
.cm-line:not(.HyperMD-quote):has(+.HyperMD-quote) + .HyperMD-quote {
    border-radius: 0 1rem 0 0;
}

Greyson · 2023 年6 月 5 日 15:53

謝謝大佬，解決了

bedrock · 2023 年6 月 7 日 00:59

发现一点小问题，如果引用块嵌套了两层就会出问题，把.HyperMD-quote-1删除就行

Greyson · 2023 年6 月 7 日 07:44

刪除 .HyperMD-quote-1 反而 margin 那些會不起作用（用於跟正文視覺上保持差別），但沒事，我沒有在用雙層引用的功能。

目前把您的語法小改一下，主要是縮小行距的部分。有點小瑕疵是右下角的陰影有一小截斷掉，但不是什麼大問題

div.HyperMD-quote.HyperMD-quote-1.cm-line {
    padding:0px 20px 0px 50px !important;
    margin-left:30px !important;
    box-shadow: 5px 0 #000e1c60;
}
.cm-line.HyperMD-quote:has(+.cm-line:not(.HyperMD-quote)) {
    padding-bottom:20px !important; 
    border-radius: 0 0 1rem 0;
    box-shadow: 5px 5px #000e1c60;
}
.cm-line:not(.HyperMD-quote):has(+.HyperMD-quote) + .HyperMD-quote {
    padding-top:30px !important; 
    margin-top: 20px !important;
    border-radius: 0 1rem 0 0;
}