1

こんにちは、私のhtmlコードです。私が基本的に試しているのは：

1-ユーザーがtextaeaid="tArea"内にコンテンツを貼り付けます

2-彼が「完了」という名前のボタンをクリックすると、textareaのコンテンツはid="tDiv"を持つdivの内部htmlに割り当てられます

3-説明したDivは、そのコンテンツに異なるフォントファミリを適用しましたが（css3を使用し、完全に機能しています）、ユーザーのデータが大きくなると、divはスクロールバーを提供したり、高さを自動的に調整したりできなくなります。

助けてください、私は何時間も費やしましたが、それでも迷っています！

<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href="resources/jquery.mobile.css" />
<script src="resources/jquery.js"></script>
<script src="resources/jquery.mobile.js"></script>
<style>
@font-face {
  font-family: 'Donegal One';
  font-style: normal;
  font-weight: 400;
  src: url(fontfile.ttf) format('truetype');
}
.hindi, textarea {

font-family: 'Donegal One', serif !important;
overflow:auto;
-webkit-overflow-scrolling:touch;
}
</style>
<script>

</script>
</head>
<body>
<div data-role=page id=sendMoneyWin data-add-back-btn=true>
        <div data-role=header data-theme="c" >
            <h1>Font Changer</h1>
        </div>      
        <div data-role=content>
        <script>

            function transformFont(){
                $("#tDiv").html($("#tArea").attr("value"));
                //$("#tArea").css("display","none");
                $("#tArea").prop("readonly",true);
                $("#tDiv").css("display","block");
                $("#doneBtn").css("display","none");
                $("#reloadBtn").css("display","inline");
            }
            function clearAllAndReload(){
                $("#tDiv").html("");
                $("#tArea").attr("value","")
                //$("#tArea").css("display","block");
                //$("#tDiv").css("display","none");
                $("#tArea").prop("readonly",false);
                $("#doneBtn").css("display","inline");
                $("#reloadBtn").css("display","none");
            }
        </script>
        <b>Please paste the contents here, in the below text box :</b><br />
        <span id="reloadBtn" style="display:none;"><input type="button" value=" Reload " onClick="clearAllAndReload()" data-inline=true/></span>
        <span id="doneBtn" ><input type="button" value=" Done " onClick="transformFont()"  data-inline=true /></span>


        <textarea id="tArea" class="hindi" style="" ></textarea>
        <div id="tDiv" class="hindi" data-scroll='true' style="white-space: pre-wrap;overflow:visible;-webkit-overflow-scrolling:touch;display:none;"></div>
        </div>

        <div data-role=footer data-theme="c">
            <span style="float:right;"><small>Created & Maintained by TechBhardwaj, 2012&nbsp;&nbsp;&nbsp;</small></span>
        </div>  
</div>
</body>
</html>
4

1 に答える 1

1

これは基本的なcssであり、divは、サイズを指定しない限り、サイズ変更可能なコンテナーとして動作する必要があります。

これはあなたのために働きます、すべてのdivスタイルを削除して、それをスタイルブロックに追加します：

I.オーバーフローを追加します。divまでスクロールしてスタイルから削除します。

#tDiv {
    /* SCROLL FIX */
    width: 100%;
    height: 200px;   
    overflow:scroll;
    /* END FIX */
    background: #aabbcc;
    white-space:
    pre-wrap;
    -webkit-overflow-scrolling:touch;
    display:none;        
}

これにより、スクロールバーが表示されます。例： http： //jsfiddle.net/Gajotres/DMqX7/

II。サイズを変更可能にする：

#tDiv {
    /* RESIZE FIX */
    width: 100%;
    height: 200px;   
    min-height: 200px;
    height:auto !important;        
    /* END FIX */
    background: #aabbcc;
    white-space:
    pre-wrap;
    -webkit-overflow-scrolling:touch;
    display:none;        
}

例： http： //jsfiddle.net/Gajotres/aq8K3/

于 2012-12-19T08:49:50.957 に答える