HTML5中的可調式多行標簽

Question

我正在嘗試使用HTML5和JavaScript編寫畫布圖應用程序。 此應用程序的主要元素是一個框，用戶可以在其中寫一個長文本，並且在寫文本時應調整該框的大小。 我意識到最好的方法是在用戶要寫入textarea標記時使用它，並且當用戶在textarea上失去焦點（模糊事件）時，它將更改為textarea中具有相同值的標簽。 您可以在下面查看相關代碼：

<!DOCTYPE html public "-//w3c//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TB/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Editable Label</title>
    <!--<link rel="stylesheet" href="box.css">-->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#txt').blur(function () {
                if ($('#txt').val().trim() != '') {
                    $('#txt').hide();
                    $('#lbl').html($('#txt').val());
                    $('#txt').val('');
                }
            });

            $('#lbl').click(function () {

                if ($('#lbl').html().trim() != '') {

                    $('#txt').show();

                    $('#txt').val($('#lbl').html());

                    $('#lbl').html('');
                }
            });
        });


    </script>
</head>
<body>


    <div id="container" align="center" style="width:1300px; height:700px; position:relative;">
        <canvas id="myCanvas" width="1300px" height="700px" style="border: 1px solid #323232;" ></canvas>
        <span id="lbl" style="color: #ff0000; font-size: 14px; font-weight: bold; position:absolute; top:200px; left:170px;"></span>
        <textarea id="txt" type="text" style="position:absolute; top:200px; left:170px;"></textarea>

    </div>




</body>
</html>

我可以使用textarea標簽而不是input標簽使文本框顯示在多行中，但是問題是我不知道如何使標簽顯示在多行中。 我搜索了很多內容，並已經使用了white-space:normal; 並display:inline-block; width: 20px; 標簽的樣式，但是沒有用。 我想知道是否需要通過使用Jquery來調整標簽大小（寬度和高度）。 如果是，我該怎么做？
請注意，由於用戶輸入的單詞數量未知，因此我不能使用換行標簽。

任何幫助將不勝感激。

Answer 1

我想你想要的是

溢出：隱藏; 或溢出：可見；

所以：

<textarea id="txt" type="text" style="position:absolute; top:200px; left:170px; overflow:hidden;"></textarea>

如果您使用CSS，則閱讀代碼會更容易。

我不確定自己要做什么， width:220px; 為我打破了文字。 這也起作用，我相信它可以更好地匹配我認為您要嘗試執行的操作：

    #lbl{           
        max-width:220px;
        height:auto;
    }

HTML5中的可調式多行標簽

問題描述

1 個解決方案

解決方案1
1 已采納 2014-09-24 02:58:25

HTML5中的可調式多行標簽

問題描述

1 個解決方案

解決方案1 1 已采納 2014-09-24 02:58:25

解決方案1
1 已采納 2014-09-24 02:58:25