Блог

Главная - Вопросы по программированию - Динамически загруженный текст обрезается пополам

Динамически загруженный текст обрезается пополам

#css #jquery #inline #html

#css #jquery #встроенный #HTML

Вопрос:

Вместо того, чтобы пытаться описать это, я должен просто показать вам. Корейский текст загружается Ajax, когда страница готова. Английские параметры справа также загружаются таким образом, но они в порядке. Единственное различие, которое я вижу, заключается в том, что они являются разделителями, тогда как корейский находится в промежутке, но мне нужно, чтобы он позволял изменять размер содержимого и при этом оставаться центрированным в том же месте. Я не смог добиться этого должным образом, когда он отображается как блок или даже с плавающей запятой. Кто-нибудь когда-нибудь сталкивался с этим раньше?

введите описание изображения здесь

Это CSS для SPAN #base, и он содержит 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="$(amp;quot;#pleaseamp;quot;).text(amp;quot;please be patient!amp;quo         t;).css(amp;quot;coloramp;quot;,amp;quot;greenamp;quot;).fadeIn(300).delay(1400).fadeOut(300);var kor =   $(amp;quot;#baseamp;quot;).text();var tts = window.open(amp;quot;http://text-to- speech.imtranslator.net/speech.asp? url=WMflamp;amp;dir=koamp;amp;text=amp;quot; kor,amp;quot;mywindowamp;quot;,amp;quot;location=no,status=no,scr ollbars=no,width=0,height=0amp;quot;);">
<img alt="korean audio" src="speaker.png"></div></div>
<span id="basewrap"><span id="base">목욕 수건</span></span>

И это код jQuery, который выполняет динамическую загрузку, группы слов извлекаются из MySQL с помощью PHP-скрипта и отправляются обратно в виде 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 "amp;win=" win "amp;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)" amp;amp;     $(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)" amp;amp;     $(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")}
});
}

Комментарии:

1. Добавьте некоторый код или скрипку js и лучше объясните свой вопрос

2. и, кстати, кажется, что это делается только в Chrome, вот ссылка koreanwordgame.com

3. Предоставьте весь относительный код. Ваш HTML в дополнение к любому CSS, который может повлиять на вашу проблему — например, контейнеры и прямые родительские элементы или псевдоэлементы, должны быть включены в ваше представление кода. Помогите нам, чтобы мы могли помочь вам.

4. извини, братан, это единственный релевантный CSS, но я также предоставлю разметку

Ответ №1:

Это решение, использующее div вместо spans, которые автоматически изменяют размер содержимого, а оболочка остается там, где она есть

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

Ответ №2:

спасибо, я фактически устранил проблему, превратив все значки в спрайты, из-за того, что над промежутком было изображение, из-за которого оно испортилось, теперь, когда все спрайты имеют заранее определенные размеры, все в порядке. Оглядываясь назад, я, вероятно, мог бы исправить это, просто указав размеры изображения в первую очередь. но это лучше во всех отношениях 🙂