跨度文本在父 div 内的位置

Question

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

我需要将 span 的文本放在 div 的右侧，但如果文本大于父 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

基本上，使用 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 是演示版。

$(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');
    }
});

.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;
}

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

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>