内联元素之间的换行

Question

在下面的代码中，我需要a在新行中放置标签并保持居中对齐。我无法更改 html。 display:block使文本外的更多可点击区域。

以下是所需结果的屏幕截图

div{
  background: #333;
  color: #fff;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  width: 400px;
}
a{
  color: red;
  display: inline-block;
  clear: both;
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="">This is link in new line</a> Cumque mollitia repellat soluta voluptates molestias veniam reiciendis.
</div>

https://jsfiddle.net/afelixj/nq7ow9eq/

Answer 1

添加display:block到a

div{
  background: #333;
  color: #fff;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  width: 400px;
}
a{
  color: red;
  display: block;
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="">This is link in new line</a> Cumque mollitia repellat soluta voluptates molestias veniam reiciendis.
</div>

删除额外的可点击区域

div {
  background: #333;
  color: #fff;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  width: 400px;
}
a {
  color: red;
  display: inline;
}
a:after {
  content: "\a";
 white-space: pre;
}
a:before {
  content: "\a";
 white-space: pre;
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="">This is link in new line</a> Cumque mollitia repellat soluta voluptates molestias veniam reiciendis.
</div>