如何使字母换行字母？

这是我认为制作垂直文字的最佳方式。如何使字母换行字母？

如何让leters“ello”与“h”排队？

<p>Hello</p> 

p { 
width: 0.5em; 
font-size: 5em; 
word-wrap: break-word; 
}

来源

2017-03-27 Pathway

小宽度使得它所以每行1个字母这是我想要的。增加宽度不会打破字母。 – Pathway

@ Pathway，你的宽度太小，不能包含你的5em字母。第一个字母“H”实际上是粘在你的'p'元素之外，这就是为什么你不能将你的当前代码垂直居中放置的原因。如果你将'overflow：hidden'设置为你的'p'元素，你会看到字母“H”的一半将消失，换句话说，它会被隐藏，因为它的一半在你的'p'外面元件。为了垂直居中字母，他们都必须分享相同的宽度。 – Mers

取决于字体，0.5em太宽：它会导致两个“l”最终在同一行上。或者是由设计？ –

如果你想以字母“H”，然后在下面的方法将做对齐字符。 text-align: center;将使字符居中它的分配空间。

p { 
 
    width: 0.5em; 
 
    font-size: 5em; 
 
    word-wrap: break-word; 
 
    text-align: center; 
 
}

<p>Hello</p>

更多有关text-align属性可以阅读here。

来源

2017-03-27 04:04:10 CodeMonkey

尝试的代码如下

<p>Hello</p>

CSS代码

p { 
    width: 0.5em; 
    font-size: 5em; 
    word-wrap: break-word; 
    text-align: center; 
}

Demo

来源

2017-03-27 04:23:53

你的宽度设置为段落标记，添加文字居中并添加宽度略高于0.5em。

p { 
 
width: 0.7em; 
 
font-size: 5em; 
 
word-wrap: break-word; 
 
text-align: center; 
 
letter-spacing: 7px; 
 
}

<p>Hello</p>

这是你所追求的？

来源

2017-03-27 04:50:10 Syfer

这取决于您的字体选择。

检查演示：https://jsfiddle.net/97odgsgr/1/

p { 
width: 0.5em; 
font-size: 5em; 
text-align: center; 
word-break: break-all; 
}

来源

2017-03-27 07:47:03 Maayi

如何使字母换行字母？

回答

相关问题