2017-01-29 37 views
1

我有幾句話。在第一句話的結尾(在這一行),我想添加將會保留故事其他部分的擾流板。我試着去做,但當點擊更多.. - 我的文字跳到下一行。我需要繼續閱讀更多...請不要告訴我任何腳本,我只想使用HTML + CSS。謝謝。如何在句子中插入<details>一行

details { 
 
    display: inline-block; 
 
} 
 
summary { 
 
    display: inline-block; 
 
}
<blockquote> 
 
    There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. 
 
    <details> 
 
    <summary> 
 
     More.. 
 
    </summary> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
 
    </details> 
 
</blockquote>

回答

2

1)請所有的副本元素顯示「內聯」,而不是內聯塊(所以他們的工作就像跨度,而不是申報單)

2)隱藏摘要元素「更多..」當細節被打開時,通過將其顯示設置爲無。

代碼如下:

blockquote { 
 
    display: inline; 
 
} 
 
    
 
details { 
 
    display: inline; 
 
} 
 

 
summary { 
 
    display: inline; 
 
} 
 

 
details[open] summary { 
 
    display: none; 
 
}
<blockquote> 
 
    There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. 
 
    <details> 
 
    <summary> 
 
     More.. 
 
    </summary> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
 
    </details> 
 
</blockquote>

1

使所有標籤{{BLOCKQUOTE,細節,摘要}} 顯示 - >聯的代替內聯塊;預定整行的內聯塊作品,並且只能使用內聯作品作爲行,並且您可以在該行中添加任何內容並在您點擊作品時摘要細節關閉display:none;細節【打開】.summery {顯示:無;}

這將關閉你的**** ****更多,當你點擊它。

相關問題