每條線的獨立文本塊

Question

我剛開始玩HTML和CSS，基本上我已經從這裏的所有帖子中學習了一切，但現在我陷入了一些我似乎無法弄清楚如何去做的事情通過研究，並決定發佈一個問題尋求幫助。

我定製的tumblr簡單的投資組合風格的主題，我的問題是關於在圖片右側的文本標題

http://www.alvaserigrafia.pt/post/34608701054

我只能拿到3行文字顯示上單塊，我希望每一條線都有自己的塊，並且具有成比例的寬度。這可以用HTML和CSS來完成嗎？

在此先感謝！

Answer 1

這是Firebug（Firefox擴展）或您喜愛的瀏覽器的開發人員工具可以派上用場的地方。如果您檢查有問題的文本元素，您會看到它們都被包裝在<p>標籤中。

<p>標記是一個塊級元素，這意味着它將自動佔據其父項的全部寬度。這也是推薦的......以及......段落的文本。

Answer 2

每行包裝在一個p元素中。塊級元素通常填充父容器的整個寬度;這就是爲什麼他們是「塊」元素。

要得到的東西，與內容縮小，自動換行的span：

<p><span>text</span></p> 

的span將只作爲內部的文本一樣大。