css - 动态加载的文本被切成两半

Question

与其尝试描述它，不如直接展示给您看。当页面准备好时，韩语文本由 Ajax 加载。右边的英文选项也是这样加载的，不过没问题。我能看到的唯一区别是它们是 DIV，而韩文是在 SPAN 中，但我需要它是让它根据内容调整大小但仍居中于同一位置的方式。当它被渲染为一个 block 甚至左浮动时，我无法正确地实现这一点。有没有人经历过这个？

这是 SPAN #base 的 CSS，它包含作为容器的 SPAN #basewrap

#base
{
background-color: #B8BFCD;
font-size: 35.5pt;
padding: 29px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px solid;
}
#basewrap
{
width: 591px;
text-align: center;
position: relative;
left: -25%;
top: 51px;
height: 113px;
}


<div style="z-index:100;" id="baselabel"><span class="eng">Korean</span><span                                        class="kor">한국어 단어</span>
<div class="ttslink" onclick="$(&quot;#please&quot;).text(&quot;please be patient!&quo         t;).css(&quot;color&quot;,&quot;green&quot;).fadeIn(300).delay(1400).fadeOut(300);var kor =   $(&quot;#base&quot;).text();var tts = window.open(&quot;http://text-to- speech.imtranslator.net/speech.asp? url=WMfl&amp;dir=ko&amp;text=&quot;+kor,&quot;mywindow&quot;,&quot;location=no,status=no,scr ollbars=no,width=0,height=0&quot;);">
<img alt="korean audio" src="speaker.png"></div></div>
<span id="basewrap"><span id="base">목욕 수건</span></span>

这是执行动态加载的 JQuery 代码，词组使用 PHP 脚本从 MySQL 中提取并作为 JSON 发送回

var getset = function (){
$("#qcount").text("/" + qcount);
$("#wincount").text(wincount); 
var percent = parseFloat(wincount/qcount*100).toFixed(0);
if (isNaN(percent)){percent = 0};
$("#percent").text("(" + percent + "%)");
$.ajax({
    type: "POST",
    url: "gamescript.php",
    data: "correct="+correct+"&win="+win+"&id="+baseid,
    success: function(json){
        var r = eval(json);
        if (r.length < 4){alert("there are no new words left! Reloading     page");location.reload();};
        $("#base").html(r[0]["korean"]).data("id", r[0]["id"]);
        random($("#option"));
        $(".option").each(function(){
            $(this).mouseover(function(){
            if($(this).css("background-color")!= "rgb(183, 190, 204)" &&     $(this).css("background-color")!= "rgb(229, 232, 238)")return;
                $(this).css({'background-color' : "#E5E8EE"});
            }).mouseout(function(){
                if($(this).css("background-color")!= "rgb(183, 190, 204)" &&     $(this).css("background-color")!= "rgb(229, 232, 238)")return;
                $(this).css("background-color", "#B7BECC");
            })
        });

        $("#option1").html(r[0]["english"]).data("id", r[0]["id"]).css("background- color","#B7BECC");
        $("#option2").html(r[1]["english"]).data("id", r[1]["id"]).css("background-color","#B7BECC");
        $("#option3").html(r[2]["english"]).data("id", r[2]["id"]).css("background-color","#B7BECC");
        $("#option4").html(r[3]["english"]).data("id", r[3]["id"]).css("background-color","#B7BECC");
        loading = 0;
        },
    error: function(){alert("error")}
});
}

Answer 1

这是一个使用 div 而不是 span 的解决方案，它会根据内容自动调整大小并且包装器保持原样

http://jsfiddle.net/peter/2aLwB/