如何包裝文字以匹配縮進

什麼是包裝文本的最佳方式，其中縮進由其前面的單詞設置，以便任何包裝的文本將以相同的縮進繼續。就像這樣：如何包裝文字以匹配縮進

我做了一個的jsfiddle與以及合作 - http://jsfiddle.net/dangoodspeed/DbYFb/1/

.left { float:left; font-weight:bold; margin-right:.5em; }

我知道我可以爲每個行的表格做，但必須有一個更好的辦法。

要求*最好的*方式是民意調查。特別是當沒有明確的善良標準時，這並不具有建設性。而且你也沒有解釋最明顯和最強大的方法是什麼問題，一個'table'元素（你曾經使用過，但是這個問題不包含任何*任何嘗試的完整例子，更不是什麼問題他們）。 –

如果float元素，給他們一個寬度並添加溢出：隱藏元素一邊在流動，你得到它： http://jsfiddle.net/DbYFb/3/

.left { 
    float:left; 
    font-weight:bold; 
    margin-right:.5em; 
    width:5em; 
} 
.right {overflow:hidden;}

2014-01-05 12:22:06

這會在「姓名」和「John Doe」之間放置太多空間。我想保留在.5em。 –

給自己你喜歡的寬度在CSS（或無http://jsfiddle.net/DbYFb/25/）:)，什麼將是有用的是，你明白如何處理，清除和包裝浮動元素:) –

我認爲這是OP想要的http://jsfiddle.net/danield770/DbYFb/26/（刪除寬度：5em規則） – Danield

根據你的屏幕截圖，這似乎會產生你需要的效果。你說你不想要餐桌。這些都是不完全的表，只是div的行爲類似表格單元格:)

，

行被包裹在表現正常股利，同時兩列給出顯示：表細胞，讓你的效果想。這是否比使用實際表格更好，取決於你。

<div class="row"> 
    <div class="left">Name:</div> 
    <div class="right">John Doe</div> 
</div> 

.row div { 
    display: table-cell; 
}

2014-01-05 12:29:21

是的，我實際上有一個表格單元解決方案，雖然你的更好。稍微簡潔一點。我希望能有一個漂亮的方法來用浮點和內聯來完成它。如果一切都失敗了，我可能會使用你的方法。謝謝。 –

回答