如何使用 CSS 根据屏幕大小动态调整文本容器宽度？

在本文中，我们给出了一个文本段落，任务是使用 HTML 和 CSS 根据屏幕大小动态适应文本宽度。代码中使用的一些重要属性如下-

• display-grid：它帮助我们以网格结构显示页面上的内容。
• grid-gap：此属性设置两个网格之间的最小间隙量。
• auto-fit：它接受所需的约束并根据屏幕的大小来适应内容。
• ：它是除法标记，帮助我们定义 HTML 代码的特定部分，以便稍后在 CSS 样式表中引用和编辑它。
• 自动适应：它使屏幕上的所有可用列适合可用空间并根据需要扩展它们以占据行。
• 分钟()和max()函数：此函数是非常相关的数学函数，其定义了函数即大于特定范围或等于MIN和小于或等于MAX。
• @media(min-width)：这是一个CSS属性，只有当最小屏幕宽度达到950px时才会应用此标签下的条件。

例1：这是一个简单的例子。在这里，我们将使用

标签来分别指定每个引号和 CSS 部分中的重复函数。

HTML

  

    
    
  
    
  

  

    

        

  
            

                With the idea of imparting programming 
                knowledge, Mr. Sandeep Jain, an IIT 
                Roorkee alumnus started a dream, 
                GeeksforGeeks. Whether programming 
                excites you or you feel stifled, wondering
                how to prepare for interview questions or
                how to ace data structures and algorithms,
                GeeksforGeeks is a one-stop solution. With 
                every tick of time, we are adding arrows
                in our quiver. From articles on various 
                computer science subjects to programming 
                problems for practice, from basic to 
                premium courses, from technologies to 
                entrance examinations, we have been 
                building ample content with superior quality.
            
            

            GFG
        
        

  
            

                With the idea of imparting programming 
                knowledge, Mr. Sandeep Jain, an IIT 
                Roorkee alumnus started a dream, 
                GeeksforGeeks. Whether programming 
                excites you or you feel stifled, wondering
                how to prepare for interview questions or
                how to ace data structures and algorithms,
                GeeksforGeeks is a one-stop solution. With 
                every tick of time, we are adding arrows
                in our quiver. From articles on various 
                computer science subjects to programming 
                problems for practice, from basic to 
                premium courses, from technologies to 
                entrance examinations, we have been 
                building ample content with superior quality.
            
            

            GFG
        
  
        

            

                With the idea of imparting programming 
                knowledge, Mr. Sandeep Jain, an IIT 
                Roorkee alumnus started a dream, 
                GeeksforGeeks. Whether programming 
                excites you or you feel stifled, wondering
                how to prepare for interview questions or
                how to ace data structures and algorithms,
                GeeksforGeeks is a one-stop solution. With 
                every tick of time, we are adding arrows
                in our quiver. From articles on various 
                computer science subjects to programming 
                problems for practice, from basic to 
                premium courses, from technologies to 
                entrance examinations, we have been 
                building ample content with superior quality.
            
            GFG
        
  
        

            

                With the idea of imparting programming 
                knowledge, Mr. Sandeep Jain, an IIT 
                Roorkee alumnus started a dream, 
                GeeksforGeeks. Whether programming 
                excites you or you feel stifled, wondering
                how to prepare for interview questions or
                how to ace data structures and algorithms,
                GeeksforGeeks is a one-stop solution. With 
                every tick of time, we are adding arrows
                in our quiver. From articles on various 
                computer science subjects to programming 
                problems for practice, from basic to 
                premium courses, from technologies to 
                entrance examinations, we have been 
                building ample content with superior quality.
            
            GFG
        
    

  

输出：

在最小化输出屏幕后，我们无法看到第二行的一半文本，并且在窗口底部有一个滚动条可以滚动。这看起来不太好，如果用户在他们的手机上查看网站，可能会导致麻烦。

示例 2：这是一种更好的方法，因为它仅添加了一个称为自动拟合的属性，从而为我们提供了更有条理且更轻松的输出。

HTML

  

    
    
      
    

  

    

        

            

                With the idea of imparting programming 
                knowledge, Mr. Sandeep Jain, an IIT 
                Roorkee alumnus started a dream, 
                GeeksforGeeks. Whether programming 
                excites you or you feel stifled, wondering
                how to prepare for interview questions or
                how to ace data structures and algorithms,
                GeeksforGeeks is a one-stop solution. With 
                every tick of time, we are adding arrows
                in our quiver. From articles on various 
                computer science subjects to programming 
                problems for practice, from basic to 
                premium courses, from technologies to 
                entrance examinations, we have been 
                building ample content with superior quality.
            
            

            GFG
        
  
        

            

                With the idea of imparting programming 
                knowledge, Mr. Sandeep Jain, an IIT 
                Roorkee alumnus started a dream, 
                GeeksforGeeks. Whether programming 
                excites you or you feel stifled, wondering
                how to prepare for interview questions or
                how to ace data structures and algorithms,
                GeeksforGeeks is a one-stop solution. With 
                every tick of time, we are adding arrows
                in our quiver. From articles on various 
                computer science subjects to programming 
                problems for practice, from basic to 
                premium courses, from technologies to 
                entrance examinations, we have been 
                building ample content with superior quality.
            
            

            GFG
        
  
        

            

                With the idea of imparting programming 
                knowledge, Mr. Sandeep Jain, an IIT 
                Roorkee alumnus started a dream, 
                GeeksforGeeks. Whether programming 
                excites you or you feel stifled, wondering
                how to prepare for interview questions or
                how to ace data structures and algorithms,
                GeeksforGeeks is a one-stop solution. With 
                every tick of time, we are adding arrows
                in our quiver. From articles on various 
                computer science subjects to programming 
                problems for practice, from basic to 
                premium courses, from technologies to 
                entrance examinations, we have been 
                building ample content with superior quality.
            
            GFG
        
  
        

            

                With the idea of imparting programming 
                knowledge, Mr. Sandeep Jain, an IIT 
                Roorkee alumnus started a dream, 
                GeeksforGeeks. Whether programming 
                excites you or you feel stifled, wondering
                how to prepare for interview questions or
                how to ace data structures and algorithms,
                GeeksforGeeks is a one-stop solution. With 
                every tick of time, we are adding arrows
                in our quiver. From articles on various 
                computer science subjects to programming 
                problems for practice, from basic to 
                premium courses, from technologies to 
                entrance examinations, we have been 
                building ample content with superior quality.
            
            GFG
        
    
  

  

输出：

在这种方法中，我们可以看到，在最小化屏幕时，所有行都被调整为一个在另一个下方的列。我们为最后一个引用提供了一个垂直滚动条。这里没有从一行中省略任何文本，我们可以阅读整个引用。