做网站月收入多少,如何查询网站是哪家公司做的,网站建设个人信息英文翻译,电商网站的二级怎么做简介
开发人员通常喜欢在网页上对文本进行换行。换行会以某种方式限制文本#xff0c;防止设计问题。文本换行还可以防止水平滚动。但有时候#xff0c;您希望文本块保持在同一行#xff0c;不考虑长度。您可以使用 CSS 的 white-space 属性来防止特定元素的换行和文本换行…简介
开发人员通常喜欢在网页上对文本进行换行。换行会以某种方式限制文本防止设计问题。文本换行还可以防止水平滚动。但有时候您希望文本块保持在同一行不考虑长度。您可以使用 CSS 的 white-space 属性来防止特定元素的换行和文本换行。
在本教程中您将以四种不同的方式对相同的文本块进行样式设置首先是带有换行然后是三次不带换行
p classsammy-wrap Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio./pp classsammy-nowrap-1 Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio./pp classsammy-nowrap-2 Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio./pp classsammy-wrap Medusafishnbsp;bandednbsp;killifishnbsp;convictnbsp;blennynbsp;saurynbsp;threadsailnbsp;beluganbsp;sturgeon.nbsp;Indiannbsp;mulnbsp;moranbsp;cisconbsp;masunbsp;salmon,nbsp;roosterfishnbsp;requiemnbsp;sharknbsp;longnosenbsp;lancetfishnbsp;bluefishnbsp;rednbsp;snappernbsp;Sacramentonbsp;splittailnbsp;giantnbsp;danio./p这将为您提供几种包装或不包装文本的选项。
先决条件
要完成本教程您需要
一个您喜欢的代码编辑器如 nano 或 Visual Studio Code一个网络浏览器对 HTML 基础知识的了解。您可以查看我们的教程系列《如何使用 HTML 构建网站》来进行入门。
步骤 1 — 在 CSS 中阻止和强制换行
在这一步中您将创建一个样式表其中包含三种不同的类。每个类将以不同的方式处理换行第一个将以默认方式断开文本而第二个和第三个将强制文本不换行。
首先使用 nano 或您喜欢的编辑器创建并打开一个名为 main.css 的新文件
nano main.css添加以下内容其中将介绍使用几个属性包括 white-space的三个 CSS 类
.sammy-wrap {border-radius: 6px;background-color: aliceblue;border: 2px dashed gray;max-width: 70%;padding: 1em;margin-bottom: .4em;
}
.sammy-nowrap-1 {border-radius: 6px;background-color: aliceblue;border: 2px dashed gray;max-width: 70%;padding: 1em;margin-bottom: .4em;white-space: nowrap;
}
.sammy-nowrap-2 {border-radius: 6px;background-color: aliceblue;border: 2px dashed gray;max-width: 70%;padding: 1em;margin-bottom: .4em;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}您的第一个类是 .sammy-wrap。它定义了六个常见的 CSS 属性包括 border-radius、background-color、border max-width、padding 和 margin-bottom。这个类将创建一个视觉框但它不定义任何特殊的换行属性。这意味着它将以默认方式断开行。
您的第二个类是 .sammy-nowrap-1。它定义了与 .sammy-wrap 相同的框但现在您添加了另一个属性white-space。white-space 属性有许多选项所有这些选项都定义了如何处理给定元素内的空白。在这里您将 white-space 设置为 nowrap这将防止所有换行。
您的第三个类是 .sammy-nowrap-2。它添加了 white-space 和另外两个属性overflow 和 text-overflow。overflow 属性处理 可滚动溢出即当元素内的内容超出该元素的边缘时发生的情况。overflow 属性可以使内容可滚动、可见或隐藏。您将 overflow 设置为 hidden然后使用 text-overflow 属性添加了更多的自定义。text-overflow 可以帮助您向用户发出信号表明有额外的文本被隐藏。您将其设置为 ellipsis因此现在您的行既不会断开也不会延伸到框外。CSS 将隐藏溢出并用 ... 表示隐藏的内容。
保存并关闭文件。
现在您有了一个样式表可以制作一个包含一些示例文本的简短 HTML 文件。然后您将在浏览器中加载网页并检查 CSS 如何防止换行。
步骤 2 — 创建 HTML 文件
在定义了 CSS 类之后你可以将它们应用到一些示例文本中。
在你喜欢的编辑器中创建并打开一个名为 index.html 的文件。确保它与 main.css 放在同一个文件夹中
nano index.html添加以下内容它将把 main.css 关联为你的 stylesheet然后将你的类应用到一个示例文本块中
!DOCTYPE HTML
html
head
meta charsetUTF-8
title如何使用 CSS 防止换行/title
link hrefmain.css relstylesheet
/headbody
p classsammy-wrap Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio./pp classsammy-nowrap-1 Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio./pp classsammy-nowrap-2 Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio./pp classsammy-wrap Medusafishnbsp;bandednbsp;killifishnbsp;convictnbsp;blennynbsp;saurynbsp;threadsailnbsp;beluganbsp;sturgeon.nbsp;Indiannbsp;mulnbsp;moranbsp;cisconbsp;masunbsp;salmon,nbsp;roosterfishnbsp;requiemnbsp;sharknbsp;longnosenbsp;lancetfishnbsp;bluefishnbsp;rednbsp;snappernbsp;Sacramentonbsp;splittailnbsp;giantnbsp;danio./p
/body
/html你已经将标准的换行样式分配给了第一个文本块将 nowrap 样式分配给了第二个并将 nowrap 与 ellipsis 隐藏到了第三个中。你已经将 sammy-wrap 分配给了第四个示例但是通过直接在 HTML 中插入不换行空格 (nbsp;) 来覆盖了默认的换行。如果你需要临时防止换行那么不换行空格可以提供一个快速的解决方案。
在 web 浏览器中打开 index.html 并查看你的结果。你的四个文本块将会显示如下 Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio. Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio. Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio. Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.
你已成功地定制了你的 CSS 属性以防止或允许四种不同的换行方式。
结论
在本教程中你使用了 CSS 来防止文本块的换行。你为盒子内的文本添加了样式然后添加了 white-space 属性来覆盖默认的文本换行。要了解更多关于处理文本换行和空白的内容请考虑探索整个 white-space CSS 属性。
