在样式圆内格式化文本

Question

Can someone please tell me how I can have the text inside a css styles circle so it comes up down instead of sequential. 有人可以告诉我如何在css样式圈中添加文本，以便使它显示出来而不是顺序显示。

Here is the jsfiddle https://jsfiddle.net/zhxysyrz/ 这是jsfiddle https://jsfiddle.net/zhxysyrz/

Here is the code 这是代码

<title>Page Title</title>
<style>
.roundFormat {
    display: inline-block;
    height: 60px;
    width: 60px;
    line-height: 60px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    background-color: #C0C0C0;
    color: white;
    text-align: center;
    font-size: 1em;
}
</style>

<body>
<span class='roundFormat'>7 Apr</span>

</body>
</html>

So inside the circle instead of having 7 Apr in sequence how can I make it stacked like below without increasing the circle size. 因此，在圆圈内而不是依次排列4月7日，如何在不增加圆圈尺寸的情况下使其像下面那样堆叠。

7 7
APR 年利率

Thanks 谢谢

Edit: This is the format i want ! 编辑：这是我想要的格式！ http://imgur.com/a/aNg33 http://imgur.com/a/aNg33

Answer 1

You can use display: table and disply: table-cell to vertically align the text in the circle and a br so the text drops to the second line. 您可以使用display：table和disply：table-cell在圆和br中使文本垂直对齐，从而使文本下降到第二行。

Here's a solution https://codepen.io/anon/pen/aWxbmx 这是一个解决方案https://codepen.io/anon/pen/aWxbmx

HTML 的HTML

<div class='roundFormat'>
    <div class='roundFormatWrap'>7<br>apr</div>
</div>

CSS 的CSS

.roundFormat {
    display: inline-block;
    height: 60px;
    width: 60px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    background-color: #C0C0C0;
    color: white;
    text-align: center;
    font-size: 1em;
    display: table;
}

.roundFormatWrap {
    display: table-cell;
    vertical-align: middle;
    line-height: 14px;
}

Answer 2

 <title>Page Title</title> <style> .roundFormat { display: inline-block; height: 60px; width: 60px; -moz-border-radius: 30px; border-radius: 30px; background-color: #C0C0C0; color: white; text-align: center; font-size: 1em; word-wrap: break-word; } .roundFormat>span:first-child { display: block; line-height: 40px; } .roundFormat>span:not(:first-child) { display: block; line-height: 0px; } } </style> <body> <span class='roundFormat'><span>7</span><span>apr</span></span> </body>

在样式圆内格式化文本

问题描述

2 个解决方案

解决方案1
2 2017-05-25 23:43:56

解决方案2
0 2017-05-25 23:38:56

在样式圆内格式化文本

问题描述

2 个解决方案

解决方案1 2 2017-05-25 23:43:56

解决方案2 0 2017-05-25 23:38:56

解决方案1
2 2017-05-25 23:43:56

解决方案2
0 2017-05-25 23:38:56