Question

我有以下代码，我需要使用JavaScript来调整文本，使其适合圆圈。

以下是当前代码：

＆＃13;

#circle {
  background:blue;
  width:200px;
  height:200px;
  top: -100px;
  margin-top:50%;
  left: -100px;
  margin-left:50%;
  text-align:center;
  font-family:monospace; /* fixed size font, making it easy to implement */
  line-height:18px;
  font-size:18px;
  border-radius:100px;
}

＆＃13;

<div id="circle">
  Hello World Helo World Helo World Helo World Helo World
</div>

＆＃13;

Answer 1

如果您只想将文字放入圈子中，只需将padding-top: 70px添加到#circle

请参阅小提琴：https://jsfiddle.net/hzurmh8n/6/

Answer 2

默认情况下，文本将以正方形流动。如果找到适合圆圈的最大正方形，则可以调整填充以适应它。计算的方式，适合圆圈的最大正方形是这个公式：

（（半径平方）/ 2）的平方根

（（200 * 200）/ 2）的平方根;

（40000/2）的平方根;

平方根（20000）= 141。

所以内容是141px x 141px。由于你的圆圈在技术上是一个200x200的盒子，填充需要（200 - 141）/ 2 = 29.5px;

所以你想要垂直居中。有很多“黑客”可以做到这一点。我正在使用下面的许多之一。见https://www.w3.org/Style/Examples/007/center.en.html

#circle {
  box-sizing:border-box;
  background:blue;
  width:200px;
  height:200px;
  text-align:center;
  font-family:monospace; /* fixed size font, making it easy to implement */
  line-height:18px;
  font-size:18px;
  border-radius:100px;
  padding:29px;
  position: relative
}


#circle p {
   box-sizing:border-box;
   width:141px;
   padding:0;
   margin: 0;
   position: absolute;               
   top: 50%;                         
   transform: translate(0, -50%) 
}

<div id="circle">
  <p>Hello World Helo World Helo World Helo World Helo World</p>
</div>

将文本调整为特定形状

2 个答案: