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

Question

我想使用自动宽度并向其添加 x 像素。
如何实现 Less 文件？

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

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

Answer 1

您应该使用 JQuery 来完成此操作。

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

CSS 代码仍然存在

span{
  width: auto;
}

编辑:如果跨度内容在执行 onload 函数后发生变化，那么只要内容发生变化，您就应该执行该行。

Here你可以找到如何做到这一点。感谢@Emile

1- The jQuery change event is used only on user input fields because if anything else is manipulated (e.g., a div), that manipulation is coming from code. So, find where the manipulation occurs, and then add whatever you need to there.

2- But if that's not possible for any reason (you're using a complicated plugin or can't find any "callback" possibilities) then the jQuery approach I'd suggest is:

a. For simple DOM manipulation, use jQuery chaining and traversing, $("#content").html('something').end().find(whatever)....

b. If you'd like to do something else, employ jQuery's bind with custom event and triggerHandler

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

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

Here's a link to jQuery trigger handler: http://api.jquery.com/triggerHandler/