如何使用HTML和CSS创建盒子中的文本

本文中要完成的任务是如何使用HTML和CSS在盒子中创建文本。让我们考虑一个简单的文本 –

Welcome

现在我们要将这个文本（我们）放在矩形框内，剩下的文本放在框外。

We
lcome

让我们深入了解使用HTML和CSS创建文本框的文章，以便更好地理解。为此，我们将使用HTML div标签。

使用HTML `<div>`标签

在HTML文档中，<div>标签表示一个划分或部分。HTML <div>标签用于组合HTML元素，然后为其提供容器并添加CSS或JavaScript样式。通过class或id属性，使<div>标签装饰起来更加简单。<div>标签可以包含任何类型的内容。

为了更好地理解使用HTML和CSS创建文本框，请看下面的示例。

示例1

在下面的示例中，我们运行代码以使文本出现在矩形框内。

<!DOCTYPE html>
<html>
   <body style="background-color:#EAFAF1 ;">
      <style>
      div {
         width: 120px;
         height: 60px;
         padding: 5px;
         border: 3px solid #8E44AD ;
         margin: 0;
      }
      </style>
      <div><h1>Welcome</h1></div><p><h2>To Tutorialspoint</h2>
   </body>
</html>

当脚本被执行时，它会生成一个输出，其中包含在框内的文本以及在网页上显示的框外的一些文本。

示例2

考虑以下示例，在这个示例中，我们使用CSS和<div>来制作框内的文本。

<!DOCTYPE html>
<html>
   <body>
      <style>
         .tutorial {
            width: 11em;
            border: 3px solid #DE3163;
            box-shadow: 9px 6px 4px #5B2C6F;
            padding: 7px 11px;
            background-image: linear-gradient(150deg, #EAFAF1 , #E8DAEF 30%,#E5E8E8 );
        }
      </style>
      <div class="tutorial">
         <p>The Best E-Learning.</p>
      </div>
   </body>
</html>

运行以上脚本后，将弹出输出，显示在应用了CSS并在网页上显示了一个盒子阴影的盒子内的文本。

示例3

执行以下代码，并观察我们如何使用CSS将文本放入盒子中。

<!DOCTYPE html>
<html>
   <body>
      <style>
         .tutorial {
            display: inline-block;
            width: 65px;
            height: 20px;
            padding: 60px 11px;
            background-color:#DFFF00;
         }
         .tutorial1 {
            text-align: center;
         }
      </style>
      <div class="tutorial1">
         <div class="tutorial">MSD</div>
         <div class="tutorial">VIRAT</div>
      </div>
   </body>
</html>

当脚本被执行时，它将生成一个由应用了CSS的两个框组成的输出，框内放置着在网页上显示的文本。