One issue I am facing involves styling an inline element, specifically an <a> element. The code in question is:
<a class="text></a>
.text{
display:inline-block;
background:red;
padding:5px
}
The problem arises when trying to load text into this element using JSON. Ideally, I would like the background of the element to be the same length as the text it holds. However, due to the asynchronous nature of loading HTML and then JSON, the length of the text is not captured correctly. While a fixed width could solve this issue, I prefer a solution that dynamically adjusts based on the text content. Are there any alternatives or solutions available? Thank you!
UPDATE: This issue appears more prominent in Chrome compared to other browsers.
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']);
}
});