如何使用 CSS 防止换行

简介

开发人员通常喜欢在网页上对文本进行换行。换行会以某种方式限制文本,防止设计问题。文本换行还可以防止水平滚动。但有时候,您希望文本块保持在同一行,不考虑长度。您可以使用 CSS 的 white-space 属性来防止特定元素的换行和文本换行。

在本教程中,您将以四种不同的方式对相同的文本块进行样式设置,首先是带有换行,然后是三次不带换行:

<p class="sammy-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.</p><p class="sammy-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.</p><p class="sammy-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.</p><p class="sammy-wrap"    > Medusafish&nbsp;banded&nbsp;killifish&nbsp;convict&nbsp;blenny&nbsp;saury&nbsp;threadsail&nbsp;beluga&nbsp;sturgeon.&nbsp;Indian&nbsp;mul&nbsp;mora&nbsp;cisco&nbsp;masu&nbsp;salmon,&nbsp;roosterfish&nbsp;requiem&nbsp;shark&nbsp;longnose&nbsp;lancetfish&nbsp;bluefish&nbsp;red&nbsp;snapper&nbsp;Sacramento&nbsp;splittail&nbsp;giant&nbsp;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-radiusbackground-colorborder max-widthpaddingmargin-bottom。这个类将创建一个视觉框,但它不定义任何特殊的换行属性。这意味着它将以默认方式断开行。

您的第二个类是 .sammy-nowrap-1。它定义了与 .sammy-wrap 相同的框,但现在您添加了另一个属性:white-spacewhite-space 属性有许多选项,所有这些选项都定义了如何处理给定元素内的空白。在这里,您将 white-space 设置为 nowrap,这将防止所有换行。

您的第三个类是 .sammy-nowrap-2。它添加了 white-space 和另外两个属性:overflowtext-overflowoverflow 属性处理 可滚动溢出,即当元素内的内容超出该元素的边缘时发生的情况。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 charset="UTF-8">
<title>如何使用 CSS 防止换行</title>
<link href="main.css" rel="stylesheet">
</head><body>
<p class="sammy-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.</p><p class="sammy-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.</p><p class="sammy-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.</p><p class="sammy-wrap"    > Medusafish&nbsp;banded&nbsp;killifish&nbsp;convict&nbsp;blenny&nbsp;saury&nbsp;threadsail&nbsp;beluga&nbsp;sturgeon.&nbsp;Indian&nbsp;mul&nbsp;mora&nbsp;cisco&nbsp;masu&nbsp;salmon,&nbsp;roosterfish&nbsp;requiem&nbsp;shark&nbsp;longnose&nbsp;lancetfish&nbsp;bluefish&nbsp;red&nbsp;snapper&nbsp;Sacramento&nbsp;splittail&nbsp;giant&nbsp;danio.</p>
</body>
</html>

你已经将标准的换行样式分配给了第一个文本块,将 nowrap 样式分配给了第二个,并将 nowrapellipsis 隐藏到了第三个中。你已经将 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 属性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/731452.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

7. 交叉开发环境设置

嵌入式交叉编译工具 ​ 交叉编译工具是为了使在上位机中编译的文件能够在不同平台的目标机中执行&#xff0c;搭建交叉编译环境是嵌入式开发的第一步&#xff0c;也是关键的一步。不同的体系结构、不同的操作系统&#xff0c;甚至是不同版本的内核&#xff0c;都会用到不同的交…

win11中微软商店如何使用微信支付?microsoft store支付教程

Microsoft Store是由微软公司提供的一个数字分发平台&#xff0c;用于购买和下载Windows操作系统及其相关应用、游戏、音乐、电影、电视节目和其他数字内容。该平台最初是作为Windows 8的一部分引入的&#xff0c;后来也适用于Windows 10和其他Microsoft平台。 以下是Microsof…

ESP32系列四:搭建http的webserver的服务器

最近在使用ESP32搭建web服务器测试&#xff0c;发现esp32搭建这类开发环境还是比较方便的。具体的http协议这里就不再赘述&#xff0c;我们主要说一下如何使用ESP32提供的API来搭建我们的http web。 一、web服务器搭建过程 1、配置web服务器 在ESP-IDF中&#xff0c;Web服务…

JavaWeb笔记 --- 一JDBC

一、JDBC JDBC就是Java操作关系型数据库的一种API DriverManager 注册驱动可以不写 Class.forName("com.mysql.jdbc.Driver"); Connection Statement ResultSet PrepareStatement 密码输入一个SQL脚本&#xff0c;直接登录 预编译开启在url中 数据库连接池

HTML5+CSS3+JS小实例:暗紫色Tabbar

实例:暗紫色Tabbar 技术栈:HTML+CSS+JS 效果: 源码: 【HTML】 <!DOCTYPE html> <html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scal…

【梳理】k8s使用Operator搭建Flink集群

文章目录 架构图安装cert-manager依赖helm 安装operator运行集群实例k8s上的两种模式&#xff1a;Native和Standalone两种CRDemo1&#xff1a;Application 单任务Demo2&#xff1a;Session 多任务创建ingress 总结 架构图 参考&#xff1a;部署验证demo 安装cert-manager依赖 …

SSL证书是什么

SSL 证书就是遵守 SSL协议&#xff0c;由受信任的数字证书颁发机构CA&#xff0c;在验证服务器身份后颁发&#xff0c;具有服务器身份验证和数据传输加密功能。 Secure socket layer(SSL)安全协议是由Netscape Communication公司设计开发。 该安全协议主要用来提供对用户和服…

CSS中 ,有哪些方式可以隐藏页面元素

文章目录 CSS中 &#xff0c;有哪些方式可以隐藏页面元素实现方式display&#xff1a;nonevisibility:hiddenopacity:0设置height 、width属性为0position:absoluteclip-path小结 CSS中 &#xff0c;有哪些方式可以隐藏页面元素 实现方式 通过 css 实现隐藏元素方法有如下 : …

Testing Library - 简介

testing-library 软件包系列以用户为中心的方式帮助您测试 UI 组件。 你的测试越接近你的软件使用方式&#xff0c;它们能给你提供的信心就越多。 核心库 DOM Testing Library&#xff0c;是一个轻量级的解决方案&#xff0c;用于通过查询和与DOM节点&#xff08;无论是使用JSD…

【面试准备日常】从头复习mysql--20240308

1.mysql数据类型 a.数值类型 分类类型大小有符号(SIGNED)范围无符号(UNSIGNED)范围描述数值类型TINYINT1 byte(-128&#xff0c;127)(0&#xff0c;255)小整数值SMALLINT2 bytes(-32768&#xff0c;32767)(0&#xff0c;65535)大整数值MEDIUMINT3 bytes(-8388608&#xff0c;…

[蓝桥杯]接龙数列(C语言)

目录 题目链接 题目理解 解题思路 完整代码 重难点解答 *dp数组的具体用法 *对于dp[b]dp[a]1>dp[b]?dp[a]1:dp[b]的解释 题目链接 [蓝桥杯 2023 省 B] 接龙数列 - 洛谷 题目理解 这道题让我们求任给的一串数字&#xff0c;若想让其变成接龙数列最少需要删除的数字…

【程序员经常使用的算法】讲解

程序员经常使用的算法 程序员经常使用的一些算法包括&#xff1a; 1. 排序算法&#xff08;Sorting Algorithms&#xff09;: 冒泡排序&#xff08;Bubble Sort&#xff09;选择排序&#xff08;Selection Sort&#xff09;插入排序&#xff08;Insertion Sort&#xff09;归…

uniapp列表进入动画

app列表入场动画 - DCloud 插件市场 列表入场动画https://ext.dcloud.net.cn/plugin?id16957

中医把脉笔记

目录 寸关尺对应的五脏六腑自己给自己把脉把脉五布法定寸关尺分浮中沉分快慢辨阴阳看虚实 参考文章 寸关尺对应的五脏六腑 自己给自己把脉 up主道道总是睡不着的把脉教学视频 用中指按住小骨头下面一点&#xff0c;这是关脉&#xff0c;左手的关脉对应肝脏。 把脉五布法 定…

网络基础aaa

三次握手 四次挥手 网络模型 TCP or UDP 的特点 如何理解 TCP 的5层协议 TCP的5层协议是指计算机网络体系结构中&#xff0c;与TCP&#xff08;传输控制协议&#xff09;相关的五个层次。这五个层次从高到低依次是&#xff1a;应用层、传输层、网络层、数据链路层和物理层。每…

java注释的详尽解析

一、什么是注解 (1).注解的作用 ①&#xff1a;注解一般用于对程序的说明&#xff0c;就像注释一样&#xff0c;但是区别是注释是给人看的&#xff0c;但是注解是给程序看的。 ②&#xff1a;让编译器进行编译检查的作用&#xff0c;比如下边这个Override注解是重写的意思&am…

前端缓存使用规范

一、Cookie使用规范 cookie的存储空间非常有限且会携带在请求头中会浪费不必要的流量&#xff0c;如果仅仅是为存储数据&#xff0c;可以采用其他替代方案&#xff0c;例如 webStorage&#xff0c;非必要不使用cookie。 1、使用方法 注意&#xff1a;过期时间时需转换成UTC格…

内存安全的编程语言

美国政府新颁布《回归基础构件&#xff1a;通往安全软件之路》 《回归基础构件&#xff1a;通往安全软件之路》中&#xff0c;白宫国家网络主任办公室&#xff08;ONCD&#xff09;呼吁开发者使用「内存安全的编程语言」 内存安全的编程语言 根据NSA的建议&#xff0c;内存…

sqlyog社区版下载,数据库客户端,mysql

Downloads webyog/sqlyog-community Wiki GitHubhttps://github.com/webyog/sqlyog-community/wiki/Downloadssqlyog社区版下载

liteIDE 解决go root报错 go: cannot find GOROOT directory: c:\go

liteIDE环境配置 我使用的liteIDE为 x36 5.9.5版本 。在查看–>选项 中可以看到 LiteEnv&#xff0c;双击LiteEnv &#xff0c;在右侧选择对应系统的env文件&#xff0c;我的是win64系统&#xff0c;所以文件名为win64.env 再双击 win64.env &#xff0c;关闭当前窗口&…