高級中心對齊 - 可能與CSS？

我想知道是否可以居中對齊一個段落，但不知何故而不是使所有的行傳播寬度爲div。它可以是例如更短 - 更長 - 更短 - 更長或更長。高級中心對齊 - 可能與CSS？

enter image description here

小提琴（沒有辦法的辦法，我希望它）：http://jsfiddle.net/u3v6x9fb/

p { 
text-align: center; 
}

來源

2014-10-22 oneday

您可以加入你想達到什麼樣的形象？ – 2014-10-22 11:44:23

嗨，可以請更具體嗎？可能你可以用你的代碼給我們一個http://jsfiddle.net/的圖片。 – hernanvicente 2014-10-22 11:45:53

看起來你需要使用'white-space：pre'或硬編碼換行符。 – 2014-10-22 11:47:03

你可以給一個寬度爲<p>標籤。
您還可以手動將<br /> linebreaks應用到您想要轉到下一行的位置。
你可以做2個例如.pshort & .plong，並將不同的寬度應用於兩者，並使用這兩個類創建文本。

來源

2014-10-22 11:49:48 Refilon

我希望能以更優雅的方式使用它，但如果這是做到這一點的方法，謝謝，只要選項處於活動狀態，我會盡快接受您的答案。 – oneday 2014-10-22 11:53:47

只需將類應用到所需段落並居中即可。

JSfiddle Demo

CSS

p { 

    text-align: center; 
} 

p.narrow { 
    width:60%; 
    margin: auto; 

}

來源

2014-10-22 11:51:44

這樣我就只能使整個段落變窄一些，我的意思是讓段落的每一行（或左右）變得更窄。 – oneday 2014-10-22 11:54:39

@oneday這是不可能的...... CSS無法檢測文本內容。 – 2014-10-22 12:01:34

這裏是添加在您需要的換行符的一個簡單的方法，在p元素上使用white-space: pre-line。

見參考文獻：http://www.w3.org/wiki/CSS/Properties/white-space

至少你不需要在span或div明確地添加<br>標籤或包裝的每一行。

p { 
 
    text-align: center; 
 
    white-space: pre-line; 
 
}

<p>Lorem ipsum dolor sit amet, 
 
consectetur adipiscing elit. Praesent in augue malesuada, tempus odio a, dapibus odio. Vestibulum convallis imperdiet est, sed tincidunt nisi tempus id. Ut quis tempor erat. Vivamus maximus, lectus non auctor iaculis, 
 
ipsum erat sagittis diam, id rutrum justo elit vel neque. 
 
Proin nulla libero, egestas sit amet lorem a, accumsan molestie velit. 
 
Aliquam sed enim quis est rutrum consectetur. Aliquam tincidunt, eros vitae pharetra consectetur, eros tellus aliquet diam, eu auctor orci lectus ut elit. 
 
Nunc eu dui nec ante dignissim pretium.</p>

來源

2014-10-22 11:56:55

高級中心對齊 - 可能與CSS？

回答

相關問題