如何删除第一行跨度中的填充

Question

我在网上找到了这个代码，但是跨度中的第一行总是有填充。我该如何删除？

如下图所示，如果删除三角形，则可以。不过，我已尝试将所有可能的padding / margin设置为0，但在该范围的第一行仍有填充。

.receiver div:nth-child(1) {
  float: right;
}

.receiver div:nth-of-type(2) {
  float: right;
  background-color: gold;
  margin: 0 10px 10px 20px;
  padding: 10px 0px 10px 10px;
  border-radius: 7px;
}

.right_triangle {
  height: 0px;
  width: 0px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent transparent gold;
  position: relative;
  right: -16px;
  top: 3px;
}

span {
  width: 50px;
  display: block;
  text-align: left;
  word-wrap: break-word;
}

<div class="receiver">
  <div>
    <img src="test.jpg">
  </div>
  <div>
    <div class="right_triangle"></div>
    <span> longlonglonglong </span>
  </div>
</div>

Answer 1

试试这段代码。

<div class="receiver">
  <div>
    <img src="test.jpg">
  </div>
  <div class="box">
    <p class="floattext">
      float text
    </p>
    <div class="right_triangle"></div>
    <span> longlonglonglong </span>
  </div>
</div>

.receiver div:nth-child(1) {
  float: right;
}

.receiver div:nth-of-type(2) {
  float: right;
  background-color: gold;
  margin: 0 10px 10px 20px;
  padding: 10px 0px 10px 10px;
  border-radius: 7px;
}

.box {
  position: relative;
}

.right_triangle {
  height: 0px;
  width: 0px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent transparent gold;
  position: absolute;
  right: -15px;
  top: 8px;
}

.floattext {
  position: absolute;
  top: -30px;
  width: 100%;
  left: 0;
}

span {
  width: 50px;
  display: block;
  text-align: left;
  word-wrap: break-word;
}

Answer 2

请用此更新您的CSS ...

<style>
.receiver div:nth-of-type(2) {
  float: right;
  background-color: gold;
  margin: 0 10px 10px 20px;
  padding: 10px 0px 10px 10px;
  border-radius: 7px;
  position: relative;
}
.right_triangle {
  height: 0px;
  width: 0px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent transparent gold;
  position: relative;
  right: -16px;
  top: 3px;
}
</style>

https://jsfiddle.net/964wtww3/

Answer 3

首先，你使用float这不是一个好习惯，在你的情况下，你看到这个＆＃34; padding＆＃34;的原因。 另外，您提供的是span display: block，那么您只是使用div代替了什么？

尝试使用flex代替css float，将范围更改为div并为其指定宽度。

结帐我的fiddle和代码

Answer 4

由于你在span元素

上设置的宽度约束，你有这个

 span {
  width: 50px;
  display: block;
  text-align: left;
  word-wrap: break-word;
}

我建议你将宽度增加到width : 100px以查看所说的效果。

span {
  width: 100px;
  display: block;
  text-align: left;
  word-wrap: break-word;
}