Question

请帮我在文本字段中拖动字词之间留出空格。可能吗？？我想在拖动的单词之间添加空格，以便它们易于区分。这是我的代码：

<!DOCTYPE HTML>
 <html>
    <head>

   <meta charset="UTF-8">
   <meta name="description" content="Free Web tutorials">
   <meta name="keywords" content="HTML,CSS,XML,JavaScript">
   <meta name="author" content="Hege Refsnes">

<style>
     #bod{
         display: inline-block; 

         }
     #drag1{

            margin-left: 0px; 
            background: #D1EEEE;
            border: 2px solid #AAAAAA;
            /*padding: 50px 50px 50px 50px; */

            width: 910px;
            height: 350px;


            }
    #field{
            height:2px;
            width:2px;
            margin:auto;
            padding:70px 20px 20px 1000px;
            }
     #verb {

           width:150px;
           height:70px;
           padding:10px;
            border:1px solid #aaaaaa;
            }
      #noun {
             width:150px;
             height:70px;
            padding:10px;
            border:1px solid #aaaaaa;
            }
 #adjective {
              width:150px;
             height:70px;
              padding:10px;
             border:1px solid #aaaaaa;
            }
</style>
<script>
       var nouns = ['I','am'];
       var verbs = ['computer'];
       var adjectives=['student']
 function allowDrop(ev) {
 ev.preventDefault();
                        }                            

 function drag(ev) {
      ev.dataTransfer.setData("Text", ev.target.id);
                   }

 function drop(ev) {
       ev.preventDefault();
       var data = ev.dataTransfer.getData("Text");
      if(ev.target.id =='verb' && verbs.indexOf(data) != -1){
      ev.target.appendChild(document.getElementById(data));
                   }

        else if(ev.target.id =='noun' && nouns.indexOf(data) != -1){
       ev.target.appendChild(document.getElementById(data));
                                                                   }
    else if(ev.target.id =='adjective' && adjectives.indexOf(data) != -1){
ev.target.appendChild(document.getElementById(data));
         }
    else{
    alert('Not Found');
         } 

 }

 <div id="field">

     <div id="verb" ondrop="drop(event)" ondragover="allowDrop(event)">
    </div>
     <br>
     <div id="noun" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
      <br>
    <div id="adjective" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    </div>
     <br>
    <div id="drag1"> <span id="I" draggable="true" ondragstart="drag(event)">            
        <b>I</b></span> <span id="am" draggable="true" ondragstart="drag(event)"> 
        <b>am</b></span> <span id="computer" draggable="true" 
         ondragstart="drag(event)"><b>computer</b></span> <span id="student" 
         draggable="true" ondragstart="drag(event)"><b>student</b></span><br/>

    </div>
</div>

Answer 1

您可以使用CSS属性word-spacing来区分单词。

例如word-spacing:20px;

Answer 2

由于每个单词都包含在<b>标记中，因此您可以为每个单词添加填充，如下所示：

#drag1 b  {padding-right: 15px}

如果你没有任何html包装这个词，我会去找Alex的答案。

文本字段之间的空格

2 个答案: