高级中心对齐 - 可能与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？

回答

相关问题