从自适应宽度计算像素宽度，然后在LESS CSS中按像素添加。

Question

我想使用自动宽度并在其上添加x像素。
如何在Less文件中实现这一目标？

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

我希望使用auto，因为我不知道文本的长度。但我知道在某个时刻会添加一个固定大小的文本到它上面。我不希望当这种情况发生时span变得更大。因此，将100px添加到auto中可以完美解决这个问题。

- AXMIM

---

我认为除了 可能 用 JavaScript 之外，这是不可能的。auto 直到页面加载完成之后才会被定义，但此时您的样式已经被渲染...所以为时已晚。 - Paulie_D

我建议使用JQuery来完成。 - pablito.aven

你能不能只将它保持为自动，然后在每一侧加上填充呢？我很好奇你在这里解决了什么实际问题。 - Paulie_D

你可以尝试使用元素的“padding”在两侧来实现类似的效果。您能给我们展示一下问题吗？ - Alex

Answer 1

你应该使用 JQuery 来完成这个任务。

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

"并且CSS代码保留"

span{
  width: auto;
}

编辑：如果span内容在onload函数执行后发生更改，则应在内容更改时执行该行。

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

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

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

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

b. 如果您想要做其他事情，请使用jQuery的bind与自定义事件和triggerHandler

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

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

这里是jQuery trigger handler的链接：http://api.jquery.com/triggerHandler/

- pablito.aven

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>

LESS

.ParentDiv
{
  width: auto;
}

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

- AXMIM