浮動文本覆蓋文字

我正在嘗試創建一個可以應用於任何文本的引用類。通常這將是一個我想要漂浮在右邊的簡短報價。我希望正文中的文本達到浮動拉式引用中每行的設定邊距。浮動文本覆蓋文字

Goal: http://i.stack.imgur.com/XC5NA.jpg

我遇到的問題是，股利或跨度圍繞創建浮動文本的矩形所以在拉報價較短的線路有很多空白的左側。

我得到什麼例子：i.stack.imgur.com/bvJv2.jpg

我想這個文本流效果自動工作，這意味着我不希望有自動設置每行的「寬度」。我只是想將一個班級應用到某個div或跨度，並使其達到此外觀。我也想保留這個HTML/CSS/CSS3。我不能輕易地將JS應用於此，因爲它是我正在處理的封閉CMS。

任何詭計？這甚至有可能嗎？

2015-10-30 Scotty

歡迎來到Stack Overflow！預計你至少試圖爲自己編碼。堆棧溢出不是代碼寫入服務。我建議你做一些額外的研究，無論是通過谷歌或通過搜索，做一個嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您嘗試過的以及爲什麼它不起作用。 –

另外... @Scotty你的圖片bvJv2.jpg鏈接不正確 – AGE

@Paulie_D：我不認爲這是一個「爲什麼我的代碼不工作」類型的問題，而是一個「我怎麼接近這個」概念問題。我不確定是否有一些我不知道的CSS屬性。我找不到任何關於文本浮動的文本，但讓文本流入div。 – Scotty

據我所知，你試圖做的事情是不可能的，文字環繞着其他文字。

然而，它可以包圍浮動形狀的文本。看看CSS shapes的規格。

也許你可以用多邊形做一些事情來創建你要完成的效果;儘管如此，我認爲這將是一個挑戰，因爲您的報價內容很可能是動態的。

來源

2015-10-30 19:13:17 Quantastical

我看到了浮動形狀的想法，它在桌子上。不過，我寧願爲所有的拉引號設置CSS處理，也不必手動設置一個新的引用形狀。這將在CMS主題中啓動，並且很多將要部署的用戶將不具備手動調整形狀的技術知識。 – Scotty

什麼做這樣的事情：https://jsfiddle.net/ToreanJoel/wfoezo0t/1/

製作h1標籤，並把一些跨度內他們每個字/幾句話。

<h1> 
    <span>"This is a</span> 
    <span class="spacer"></span> 
    <span>blockquote</span> 
    <span class="spacer"></span> 
    <span>to test"</span> 
</h1>

那麼對於CSS如下：

h1 { 
    font-size:44px; 
    margin: 0; 
    font-family: sans-serif; 
} 
h1 span{ 
    float:right; 
    text-align: right; 
    clear:both; 
    margin: 0; 
    margin-left: 14px; 
} 

.spacer { 
    height: 10px; 
} 
.paragraph { 
    text-align: justify; 
}

注意事項IM使得正當各地標題（.paragraph類）的文本，這將使你是這樣的：https://jsfiddle.net/ToreanJoel/wfoezo0t/1/

記住它的可編輯爲你的好運

來源

2015-10-30 21:03:23 TrojanMorse

我喜歡這種方法，我可能不得不走這條路。不用手動分割線就可以了，但我可能沒有選擇。謝謝您的幫助！ – Scotty

總是很高興知道它的幫助，讓我知道任何更新，如果你找到另一種解決方案，我發現有趣的問題 – TrojanMorse

浮動文本覆蓋文字

回答

相關問題