Html span文本在父div中的位置

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

我需要将span的文本放在div的右侧，但如果文本大于父div，则不应将其包装为右对齐。它应该是左对齐的

我使用了文本对齐：右。。但是，我的跨度中的第一个文本向右包装，这是我不想要的。我试过右浮动、固定位置等。。但无法修复它

这是我的密码

.parent{
显示：内联块；
宽度：20%；
边缘顶部：10px；
右边距：15px；
边框：1px纯红；
}
斯潘标签{
显示：块；
边缘底部：2.2米；
单词包装：打断单词；
文本对齐：右对齐；
}

ExcellentExcellentaeAExcellentExcellentaeAExcellente
好

基本上，有了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

中有多少行的。我取

行高度的值

。如果无法设置，则值将为

正常值

。将是脚本中的错误。在这种情况下，始终指向

线高度

。标准值：16px，在大多数浏览器中

这是演示

$（文档）.ready（函数（）{
var divheight=$（“.spanLabel”）.height（）；
var lineheight=$（“.spanLabel”）.css（'line-height'）.replace（'px'，”）；
if（数学圆整（divheight/parseInt（lineheight））>1）{
$（“.spanLabel”）.css（'text-align'，'left'）；
}
});
.parent{
显示：内联块；
宽度：20%；
边缘顶部：10px；
右边距：15px；
边框：1px纯红；
}
斯潘标签{
显示：块；
边缘底部：2.2米；
单词包装：打断单词；
文本对齐：右对齐；
线高：16px；
}

ExcellentExcellentaeAExcellentExcellentaeAExcellente
您可以使用
float:right
。它将右对齐元素，左对齐元素中的文本

因为，对于浮动图元，自动宽度是使用


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

请注意，例外情况是，如果文本中没有中断机会，则浮动元素可能会比包装器大。要避免这种情况，您可以使用以下方法之一：


最大宽度：100%
wordbreak:break all
在HTML中添加突破性机会，例如空格或
­



但是，如果浮动图元足够窄，它们将彼此相邻放置。要防止这种情况，可以使用

所以最后的代码应该是

.span标签{
浮动：右侧；/*向右对齐*/
清除：右；/*防止相邻*/
最大宽度：100%；/*以防文本没有中断机会*/
}


.parent{
显示：内联块；
宽度：20%；
边缘顶部：10px；
右边距：15px；
边框：1px纯红；
}
斯潘标签{
边缘底部：2.2米；
单词包装：打断单词；
浮动：对；
清楚:对,；
最大宽度：100%；
}

ExcellentExcellentaeAExcellentExcellentaeAExcellente
好
CSS无法检测到这一点。。您需要Javascript。谢谢您的回复。。但是，如果第一个跨度中的文本小于100%，那么这就是问题所在。例如，在第一个跨距中只有“优秀”，在一行中表现良好：（@Lalit_Test你当然是对的，我忘记了
clear:right