如何防止文本在 SASS 中占用多于一行？

有时我们希望通过防止文本占用多于一行或阻止自动换行的东西来显示我们网页中的文本。可以通过在 sass文件中轻松添加一些属性来完成。

方法：我们开始创建一个简单的 HTML 文件，我们将使用

标签在正文中添加一些文本。然后创建一个 sass 文件并将其命名为“style”。此文件的扩展名是“.scss”。现在我们将添加防止它占用超过 1 行的代码。在这里，我们将使用 2 个名为 white-space 和 overflow 的属性。 white-space 的值将是 nowrap 并且溢出的值将被隐藏。完成此操作后，我们将保存文件并使用任何 sass 编译器将其转换为 CSS 文件。如果你使用的是 Visual Studio Code，你可以安装一个名为“Live Sass Compiler”的扩展，它会为你完成这项工作。最后，我们将在我们之前创建的 HTML 文件的 head 标记中链接我们的 CSS 文件。

使用的属性：

1. 空白：它有助于设置如何处理元素文本内的空白和换行符。
2. 溢出：它控制太大而无法放入其块格式上下文的内容会发生什么。

我们将设置属性的值：

• “ nowrap ” 到 white-space 属性，它将空格合并为一个但抑制换行符。
• “隐藏”到溢出属性，它剪辑溢出，其余内容将不可见。

下面是style.scss文件的代码：

div {
    white-space: nowrap;
    overflow: hidden; 
}

使用任何Sass Compiler编译并将其转换为css 。将在名为 style.css的同一文件夹中创建一个新文件。现在，将文件链接到 html。

HTML

  

  
    
    

  

    

        HTML Introduction: HTML stands for HyperText 
        Markup Language. It is used to design web 
        pages using a markup language. HTML is the 
        combination of Hypertext and Markup language. 
        Hypertext defines the link between the web 
        pages. A markup language is used to define 
        the text document within tag which defines 
        the structure of web pages.
    

  

输出：