2016-09-22 96 views
1

快速點,在對齊表格中的文本時遇到問題,因爲它將第二行包裹起來。我有treid合理,阻止和內聯等讚賞任何建議。我需要的是第二線正好在第一行如下對齊:在vfdbd開始.... enter image description here文本的CSS對齊方式

enter image description here

+1

Plz不要在這裏使用圖片,而是嘗試按Ctrl + M並添加您的代碼。 – ARJUN

+0

您的代碼正在文本節點上使用':: before' sudo元素。 @ user6849557的答案應該是訣竅。 – Sanuj

回答

1

的包裝需要有通過CSS應用文本對齊:

text-align:justify; 
text-justify:inter-word; 

一般來說,與「排版」應用程序進行打印相比,瀏覽器將完全對齊的文本做得很糟糕。一般來說,瀏覽器的全面理由使得文本HARDER可以閱讀,通常應該避免。

+0

沒有工作,沒有區別 –

+0

可以U添加您的代碼或屏幕截圖。它看起來像 –

+0

我從來沒有聽說過'text-justify':似乎它是一箇舊的僅限於IE的屬性,它已進入[CSS Text Module Level 3](https://www.w3.org/TR/css-text-3/#text-justify)(只支持該瀏覽器?)。如果它是某種先進的字間距,似乎與OP問題無關,儘管 – FelipeAls

2

將文本放在span元素中,並使用display: inline-block;。這樣,文本從同一行開始。

1

如果您知道要添加到第一行左側的符號(文本或圖像)的寬度,則不需要額外的元素。

訣竅是添加一個負值的文本縮進,通過積極的左邊界進行反向平衡。假設你通過增加一個40像素寬的互聯網小貓:僞+圖像和文本之間的填充8像素:該元素則需要以下第一CSS規則:

/* Image is 40px-wide and we want it at 8px from text */ 
 
.txt-indent { 
 
    margin-left: 48px; 
 
    text-indent: -48px; 
 
} 
 
.txt-indent:before { 
 
    content: url(https://placekitten.com/40/40); 
 
    padding-right: 8px; 
 
} 
 
body { 
 
    width: 200px; 
 
    line-height: 1.5; 
 
}
<p class="txt-indent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, natus soluta! Itaque, corporis veritatis quisquam ut debitis sed incidunt enim sit ratione sint repellat aliquid sunt rerum commodi asperiores ipsa!</p>

+0

感謝文本縮進,直到現在我都不知道。 –

0

端向上提高的生產線,高度讓它起作用。