縮進文本從第二排

我希望讓我的格式文本塊：縮進文本從第二排

title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et turpis urna. Phasellus magna elit, tempus ut accumsan posuere, suscipit vel ligula. Vestibulum mauris massa, venenatis non dignissim vestibulum,

的樣子：

title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et turpis urna. 
     Phasellus magna elit, tempus ut accumsan posuere, suscipit vel ligula. Vestibulum 
     mauris massa, venenatis non dignissim vestibulum,

我在不加改變文本的任何解決方案感興趣手動。

任何幫助，將不勝感激。

來源

2012-07-06 Mateusz Rogulski

如果你真的想在不添加標籤的情況下解決這個問題，你可以更詳細地說明格式。標題包括什麼？ '-'可以作爲分隔符嗎？ – kapa 2012-07-06 10:02:38

是的，'''可以分隔 – 2012-07-06 10:11:27

與margin並與:first-line一起text-indent打僞類，你可以達到預期的效果：這裏是有關的CSS

p { text-indent: -2.35em ; margin-left: 2.35em } 
p:first-line { margin-left: -2.35em }

例小提琴：http://jsfiddle.net/nb88K/

請注意，選擇的值是嚴格依賴於字的寬度爲"title"。

一點題外話，如果你能夠改變的標記本身我反而建議這個詞從你的文字移至:before僞類—的事實，你的文字是一個標題，從語義點的content財產，應該通過元素的選擇來傳達（所以我會選擇一個<hn>標籤）

來源

2012-07-06 09:53:35 fcalderan

我曾經看過'：first-line'，但是我沒有用'text-indent'連接它。謝謝！ – 2012-07-06 10:09:47

一個快速和骯髒的解決方案：

<pre> 
    <!-- your text stuff --> 
</pre>

來源

2012-07-06 08:38:13 Johan

好吧，我沒有寫這個，但我不想要我的代碼中集成的解決方案，我有搜索全局解決方案。有任何想法嗎？ – 2012-07-06 08:44:21

全球解決方案是什麼意思？ – kapa 2012-07-06 08:44:58

有點像javascript或css可以讓它成爲1000行。 – 2012-07-06 08:46:29

HTML

<div class="title">title</div> 
<div class="text"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et turpis urna. Phasellus magna elit, tempus ut accumsan posuere, suscipit vel ligula. Vestibulum mauris massa, venenatis non dignissim vestibulum, 
</div>

CSS

.title { float: left; } 
.title:after { content: '-'; display: inline-block; margin: 0 5px; } 
.text { overflow: hidden; }

jsFiddle Demo

標題左移，overflow: hidden;用於establish a new block formatting context。您可以使用除默認visible以外的任何overflow值進行此操作。

在這唯一的一點，是不是絕對的跨瀏覽器是:after僞元素（which works from IE8），但你可以簡單地使用你的HTML靜態-代替。我選擇這樣做是因爲它更清潔，標記中沒有不必要的樣式。

對於標題，您可以使用更多的語義，如適當的標題（h1,h2等）。

來源

2012-07-06 08:47:32 kapa

感謝您的回答，但我已將所有文本分爲「標題」和「文本」部分。 – 2012-07-06 08:57:26

@MateuszRogulski利用正則表達式 – Johan 2012-07-06 09:04:16

@MateuszRogulski那麼，要正確格式化它，你還需要適當的標記。你可以找到一些奇怪的方式來格式化，但正確的方法是改變標記。如果你錯過了基礎，屋頂將永遠不會穩定。 – kapa 2012-07-06 09:59:14

縮進文本從第二排

回答

相關問題