Question

我正在研究CSS问题。我有一个父div，其中有一些子跨度，它们作为块元素动态生成...

我需要在div的右侧有span的文本，但如果文本超过父div，那么它不应该被包装到右对齐。它应该左对齐..

我使用了text-align：right ..但是我的span中的第一个文本包装到右边，我不想要。我试过漂浮 - 正确，位置 - 固定等...但无法解决它。

这是我的代码..

.parent {
  display: inline-block;
  width: 20%;
  margin-top: 10px;
  margin-right: 15px;
  border: 1px solid red;
}
.spanLabel {
  display: block;
  margin-bottom: 2.2em;
  word-wrap: break-word;
  text-align: right;
}

<div class="parent">
  <span class="spanLabel">
	ExcellentExcellentAAExcellentExcellentAAExcellentE
  </span>
  <span class="spanLabel">
	Good
  </span>
</div>

我需要类似span的文本应该是父div的右侧但是如果文本增长，那么下一行应该保持对齐..我需要为span提供相同的css，因为它是在循环中动态生成的..

非常感谢任何帮助..

Answer 1

Bassicaly，使用CSS你无法做到。使用jQuery它不是问题。看看这段代码：

$(document).ready(function() {
    var divheight = $(".spanLabel").height();
    var lineheight = $(".spanLabel").css('line-height').replace("px","");
    alert(Math.round(divheight/parseInt(lineheight)));
});

我们会计算span有多少行。然后，如果 Math.round(divheight/parseInt(lineheight))

超过1，您可以将文字左下：

$(document).ready(function() {
    var divheight = $(".spanLabel").height();
    var lineheight = $(".spanLabel").css('line-height').replace("px","");
    if (Math.round(divheight/parseInt(lineheight)) > 1) {
        $(".spanLabel").css('text-align', 'left');
    }
});

另外，看看我如何理解span中有多少行。我认为line-height的价值。如果您无法设置，则值为normal。比脚本中的错误更多。总是指向line-height。标准值：16px，在大多数浏览器中。

Here是演示。

＆＃13;

$(document).ready(function() {
    var divheight = $(".spanLabel").height();
    var lineheight = $(".spanLabel").css('line-height').replace("px","");
    if (Math.round(divheight/parseInt(lineheight)) > 1) {
    	$(".spanLabel").css('text-align', 'left');
    }
});

＆＃13;

.parent {
    display: inline-block;
    width:20%; 
    margin-top: 10px;
    margin-right:15px;
    border:1px solid red;
}

.spanLabel {
    display:block;
    margin-bottom: 2.2em;
    word-wrap: break-word;
    text-align:right;
    line-height: 16px;
}

＆＃13;

<div class="parent">
    <span class="spanLabel">
        ExcellentExcellentAAExcellentExcellentAAExcellentE
    </span>
</div>

＆＃13;

Answer 2

您可以使用float: right。它会将元素对齐到右边，将文本对齐到左边。

因为，对于浮动元素，使用shrink-to-fit algorithm，

计算自动宽度

如果文本占用的空间少于包装器中的可用空间，则浮动元素将与文本一样宽，因此看起来文本与右侧对齐。
如果文本比包装器宽，则浮动元素将与包装器一样宽。文本将被包装成多行，与左对齐。

请注意，如果文本中没有中断机会，则浮动元素可能会比包装器大。为避免这种情况，您可以使用以下方法之一：
- max-width: 100%
- word-break: break-all
- 在HTML中添加突破机会，例如空格或

但是，如果浮动元素足够窄，它们将彼此相邻定位。为防止这种情况发生，您可以使用clearance。

所以最终的代码就像是

.spanLabel {
  float: right;    /* Align to the right */
  clear: right;    /* Prevent adjacency */
  max-width: 100%; /* Just in case the text has no break opportunities */
}

.parent {
  display: inline-block;
  width: 20%;
  margin-top: 10px;
  margin-right: 15px;
  border: 1px solid red;
}
.spanLabel {
  margin-bottom: 2.2em;
  word-wrap: break-word;
  float: right;
  clear: right;
  max-width: 100%;
}

<div class="parent">
  <span class="spanLabel">
    ExcellentExcellentAAExcellentExcellentAAExcellentE
  </span>
  <span class="spanLabel">
    Good
  </span>
</div>

跨文本在父div中的位置

2 个答案: