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