html - 在 JSON 内容加载之前设置的内联元素的宽度

Question

我对内联元素有疑问，特别是 <a>元素。具体如下:

<a class="text></a>

.text{
display:inline-block;
background:red;
padding:5px
}

问题是我用 JSON 加载了它包含的文本。现在我希望它的背景是文本的长度，但问题是 html 加载然后 json 加载所以它不会获取文本的长度。我可以设置一个固定的宽度，但我宁愿它是文本的大小。我有什么选择吗？谢谢!

编辑:Chrome 似乎比任何其他浏览器都更容易引起问题。

Javascript:

$(document).ready(function() {
var data;
function loadContent(){ 
    $.ajax({
        url: "json/content.json",
        data: "nocache=" + Math.random(),
        type: "GET",
        contentType: "application/json",
        dataType: "json",
        success: function(source){
            data = source;
            showInfo();
        },
        error: function(data){
            alert("Failed to load content");
        }
    }); 

}

loadContent();
    function showInfo(){
        $(".text").html(data[lang]['startpage']['text']);
}
});

Answer 1

如果这会解决您的问题，我不是 100%，但尝试这样做，通过 source进入函数而不是使用你的(未声明的)data变量。

$(document).ready(function() {

function loadContent(){ 
    $.ajax({
        url: "json/content.json",
        data: "nocache=" + Math.random(),
        type: "GET",
        contentType: "application/json",
        dataType: "json",
        success: showInfo,
        error: function(data){
            alert("Failed to load content");
        }
    }); 

}

loadContent();

function showInfo(data){
    $(".text").html(data[lang]['startpage']['text']);
}
});

更新

要让所有的 div 在同一行更改 #game-nav来自 inline至 inline-block .

#game-nav li {
    display: inline-block;
}

display:inline元素(如 <b> 或 <span> 换行，这不是您想要的，内联 block 可以换行到新行，但它们不会中断中间单词。