Question

这是代码，有没有办法防止从断线“发送”字？我无法将p标签更改为span，因为动画无效。

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
  width: 60px;
  height: 60px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<p class="loader"></p> <span style="white-space:nowrap;"> Sending . . . </span>

Answer 1

一个选项是为p和span创建包装并将其设为 flexbox - 请参阅下面的演示：

＆＃13;

.wrapper {
  display: flex;
  align-items:center;
}
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
  width: 60px;
  height: 60px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

＆＃13;

<div class="wrapper">
  <p class="loader"></p> <span> Sending . . . </span>
</div>

＆＃13;

Answer 2

试试这个：

.loader{
  float: left;
}

Answer 3

我想你不会这样做

此处为css代码

span {
  left: 29px;
  position: absolute;
  top: 50px;
}

防止p标签后的句子断行

3 个答案: