计算宽度从自动到像素，然后在 LESS CSS 中按像素添加

Question

我想使用自动宽度并向其添加x像素。
如何实现这一点 更少的文件？

span 
{
    width:calc(auto + 100px);
}

我想使用自动，因为我不知道文本的长度。但我知道固定大小的文本会在某个时候附加到它。我不希望这种情况发生时跨度变大。因此，将 100px 添加到自动将完美处理它。

Answer 1

你应该用 JQuery 来做这件事。

window.onload = function(){
  $('span').width($('span').width()+100px);
};

CSS代码仍然存在

span{
  width: auto;
}

编辑：如果在执行 onload 函数后跨度内容发生变化，那么每当内容发生变化时，您应该执行该行。

在这里，您可以找到如何执行此操作。致谢@Emile

1-jQuery更改事件仅用于用户输入字段，因为如果操纵任何其他内容（例如div），则该操作来自代码。因此，找到操作发生的位置，然后将所需的任何内容添加到其中。

2-但是，如果由于任何原因无法做到这一点（您正在使用复杂的插件或找不到任何"回调"可能性），那么我建议的jQuery方法是：

一个。对于简单的 DOM 操作，请使用 jQuery 链接和遍历，$("#content").html('something').end().find(whatever)....

二.如果你想做其他事情，请使用jQuery的绑定与自定义事件和触发器处理程序

。

$("#content").html('something').triggerHandler('customAction');

$('#content').unbind().bind('customAction', function(event, data) { //Custom-action });

以下是jQuery触发器处理程序的链接：http://api.jquery.com/triggerHandler/

Answer 2

正如@Paulie_D所说，这是不可能的。使用Javascript处理此问题的建议解决方案可能会起作用，但我宁愿避免使用此解决方案，因为我不喜欢使用Javascript而不是HTML/CSS处理布局。

我使用的解决方案：
使用 DIV 而不是 SPAN。这允许在其中添加另一个固定宽度为 100px 的div。这样，父div 的大小为内容，包括这个 100px 子div。因此需要+100。

添加额外内容

时，将使用子div 来显示额外内容。

<div class="ParentDiv">
   TextWithVariableLength
   <div class = "ChildDiv"></div>
</div>

少

.ParentDiv
{
  width: auto;
}
.ChildDiv
{
  height:100%;
  width: 100px;
}