html - 我如何调整圆半径以适合其中的段落

标签 html css twitter-bootstrap-3

我正在尝试调整段落大小并调整圆半径。任何人都可以调查一下吗?

#circle{
 background:#aaa;
 height:300px;
 width:300px;
  border-radius:50%;
 text-align:center;
  /*line-height:300px;*/

}
<body>
  <div class="container">
      <div id="circle">
    <span class="text-center"><p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet </p></span></div>
  </div>
</body>

最佳答案

您可以使用 flexbox 使副本在圆圈内居中,并使用一些填充来包含它。请注意,您必须为 flexbox 使用浏览器前缀,具体取决于您需要支持的浏览器(更多信息:http://caniuse.com/#feat=flexbox)

*, *:before, *:after {
    box-sizing:border-box;
}
#circle {
	background: #aaa;
	border-radius: 50%;
	text-align:center;
	height:300px;
	width:300px;
	display:flex;
	justify-content:center;
	align-items:center;
	padding:20px;
}
<div class="container">
    <div id="circle">
        <p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</p>
    </div>
</div>

关于html - 我如何调整圆半径以适合其中的段落,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36094615/

相关文章:

html - 背景颜色不会扩展到高度

Javascript - chatjs donut 在悬停时运行脚本

css - Bootstrap 按钮组大小不一样

html - 如何为多列列表的每一列添加粗线?

css - 使用 bootstrap 3 跨越整个进度条的输入范围

javascript - 下拉加上angularjs和bootstrap中的输入文本

css - Webpack bootstrap.css npm 模块无法使用 ExtractTextLoader + css_loader 进行解析

html - 在此示例中,Canvas.Context保存和还原的目的是什么?

css - DIV 内没有填充问题

html - 如何删除两个 <span> 标签之间的空格?