当前位置： 首页 > news >正文

CSS中的writing-mode属性：解锁文本布局新维度

news 2026/3/31 11:28:23

在网页设计的广阔天地里，CSS（层叠样式表）扮演着至关重要的角色，它赋予了我们塑造网页外观和布局的强大能力。其中，writing-mode属性是一个常被忽视但功能强大的工具，用于控制文本的书写方向和排列方式。今天，我们就来深入探讨这个属性，揭开它在多语言支持、创意布局设计等方面的神秘面纱，并通过实际代码示例带你上手实践。

什么是writing-mode属性？

writing-mode属性定义了文本在块级元素中的书写方向，它决定了文本是水平还是垂直排列，以及是从左到右、从右到左，还是从上到下显示。这对于支持多种语言的排版（如东亚语言的竖排文本）和创造非传统布局至关重要。

writing-mode的值
  • horizontal-tb（默认值）：文本从左到右书写，行从上到下排列，这是大多数西方语言的常规模式。
  • vertical-rl：文本从上到下书写，行从右到左排列，常见于东亚竖排文本。
  • vertical-lr：文本从上到下书写，行从左到右排列，不太常用。
  • sideways-rl 和 sideways-lr：这两个值在一些特定场景下使用，比如打印布局，但现代浏览器支持有限。
实战代码示例

假设我们要在一个页面上实现东亚风格的竖排文字效果，下面是如何利用writing-mode属性实现的简单示例：

Html

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>Writing Mode 示例</title><style>.vertical-text {writing-mode: vertical-rl;text-align: right; /* 使文本右对齐，符合竖排阅读习惯 */font-family: 'SimSun', sans-serif; /* 使用支持中文的字体 */}</style>
</head>
<body><div class="vertical-text">竖排文字示例，展现古风韵味。
</div></body>
</html>

在这个例子中，我们创建了一个类名为.vertical-text的CSS类，使用writing-mode: vertical-rl;将文本设置为从上到下、从右到左排列，同时通过text-align: right;确保文本在竖直方向上对齐正确。选择合适的字体font-family: 'SimSun', sans-serif;也是保证文本美观的关键。

应用场景
  1. 多语言兼容性：对于需要展示多种书写方向语言的网站，writing-mode能有效支持从左至右、从右至左以及从上至下的文本排列，增强国际化的用户体验。
  2. 创意布局：设计师可以利用writing-mode打破传统的横排文本布局，创造出独特的视觉效果，如竖排标题、创意的导航菜单等。
  3. 响应式设计：在某些特定的屏幕尺寸或设备上，调整文本的书写模式可以优化内容的呈现，特别是在窄屏设备上的阅读体验。
结语

writing-mode属性虽小，却蕴藏着改变文本布局的巨大能量。无论是为了文化尊重、设计创新还是提升用户体验，掌握并灵活运用这一属性，都能让你的设计作品更加丰富多彩。随着Web技术的不断进步，我们有理由相信，未来writing-mode将在更多领域展现出其独特的魅力。希望本文能够激发你对CSS这一鲜为人知特性的探索兴趣，开启你的创意之旅。

相关文章：

CSS中的writing-mode属性：解锁文本布局新维度

在网页设计的广阔天地里&#xff0c;CSS&#xff08;层叠样式表&#xff09;扮演着至关重要的角色&#xff0c;它赋予了我们塑造网页外观和布局的强大能力。其中&#xff0c;writing-mode属性是一个常被忽视但功能强大的工具&#xff0c;用于控制文本的书写方向和排列方式。今天…...

编程日记 2024/5/29 5:24:56

SQL面试题练习 —— 波峰波谷

来源&#xff1a;字节今日头条 目录 1 题目2 建表语句3 题解 1 题目 有如下数据&#xff0c;记录每天每只股票的收盘价格&#xff0c;请查出每只股票的波峰和波谷的日期和价格&#xff1b; 波峰定义&#xff1a;股票价格高于前一天和后一天价格时为波峰 波谷定义&#xff1a;股…...

编程日记 2024/5/29 5:23:56

检索模型预训练方法：RetroMAE

论文title&#xff1a;https://arxiv.org/pdf/2205.12035RetroMAE: Pre-Training Retrieval-oriented Language Models Via Masked Auto-Encoder 论文链接&#xff1a;https://arxiv.org/pdf/2205.12035 摘要 1.一种新的MAE工作流&#xff0c;编码器和解器输入进行了不同的掩…...

编程日记 2024/5/29 5:22:54

OpenHarmony实战开发——宿舍全屋智能开发指南

项目说明 基于OpenAtom OpenHarmony&#xff08;以下简称“OpenHarmony”&#xff09;、数字管家开发宿舍全屋智能&#xff0c;实现碰一碰开门、碰一碰开灯、碰一碰开风扇以及烟感检测。因为各项目开发流程大体相似&#xff0c;本文主要以碰一碰开门为例介绍如何在现有OpenHar…...

编程日记 2024/5/29 5:21:54

等了10年，终于迎来RTX5/RTX4全家桶开源，开源，开源！ 且免费商用

我们的V4, V5, V6 ,V7开发板都配套了大量的RTX4, RTX5教程和案例&#xff0c;从2015年发布首版RTX4内核教程以来&#xff0c;已经整整10年了。 1、制作这个RTX教程和案例&#xff0c;其实也承受了很大的压力&#xff0c;因为只有RTX内核是免费商用的&#xff0c;中间件并不免费…...

编程日记 2024/5/29 5:20:53

Python 读取.shp文件并生成图幅编号

代码适用于需要处理和分析地理空间数据的场景&#xff0c;如城市规划、环境监测或自然资源管理&#xff0c;其中它可以帮助用户读取特定区域的Shapefile文件&#xff0c;确定其地理边界&#xff0c;并基于这些边界计算出按照经纬度5度间隔的图幅编号&#xff0c;进而用于地图制…...

编程日记 2024/5/29 5:19:52

【算法】位运算算法——判断字符是否唯一

题解&#xff1a;判断字符是否唯一(位运算算法) 目录 1.题目2.题解3.位图参考代码4.细节5.总结 1.题目 题目链接&#xff1a;LINK 2.题解 题解有两种方法&#xff0c; 一是做一个哈希数组&#xff0c;去查重&#xff1b; 二是直接用一个变量每一位来对应表示是否有这个字母…...

编程日记 2024/5/29 5:18:51

AAAI2024 基于扩散模型 多类别 工业异常检测 DiAD

前言 本文分享一个基于扩散模型的多类别异常检测框架&#xff0c;用于检测工业场景的缺陷检测或异常检测。 设计SG语义引导网络&#xff0c;在重建过程中有效保持输入图像的语义信息&#xff0c;解决了LDM在多类别异常检测中的语义信息丢失问题。高效重建&#xff0c;通过在潜…...

编程日记 2024/5/29 5:17:50

JavaEE-Spring Controller(服务器控制以及Controller的实现和配置)

Spring Controller 服务器控制 响应架构 Spring Boot 内集成了 Tomcat 服务器&#xff0c;也可以外接 Tomcat 服务器。通过控制层接收浏览器的 URL 请求进行操作并返回数据。 底层和浏览器的信息交互仍旧由 servlet 完成&#xff0c;服务器整体架构如下&#xff1a; Server&…...

编程日记 2024/5/29 5:16:49

页面导出PDF，非可视区域如何解决

const exportToPDF () > {const element document.getElementById(chart-container);if (!element) return;const originalScrollHeight element.scrollHeight;// 临时解除滚动条限制&#xff0c;确保所有内容都可见element.style.height ${originalScrollHeight}px;// …...

编程日记 2024/5/29 5:15:48

Android UI：ViewTree: 监听

文章目录 涉及设计模式 ​​​​​​​​​​​​​​观察者模式+策略模式API源码分析总结涉及设计模式 观察者模式+策略模式 被观察者：ViewTree ViewTree持有一个观察器ViewTreeObserver 系统在ViewRootImpl和View的相关方法中调用ViewTreeObserver上的注册的监听器的方法，…...

编程日记 2024/5/29 5:14:46

【光伏干货】光伏无人机巡检步骤

随着光伏产业的迅速发展和无人机技术的日益成熟&#xff0c;光伏无人机巡检已成为提高光伏电站运维效率、降低运维成本的重要手段。本文将详细介绍光伏无人机巡检的步骤&#xff0c;帮助读者更好地理解和应用这一技术。 一、前期准备 1、设备检查&#xff1a;对无人机及其相关…...

编程日记 2024/5/29 5:13:46

『大模型笔记』从头开始代码构建GPT！

从头开始代码构建GPT！ 文章目录 一. 从头开始代码构建GPT！二. 参考文献一. 从头开始代码构建GPT！ 我们构建了一个生成式预训练Transformer (GPT)，遵循论文《Attention is All You Need》和OpenAI的GPT-2 / GPT-3的方法。我们讨论了与ChatGPT的联系，ChatGPT已经风靡全球。我…...

编程日记 2024/5/29 5:12:45

idea的project structure下project [lauguage ]()level 没有java的sdk17选项如何导入

idea的project structure下project lauguage level 没有java的sdk17选项如何导入 别导入了&#xff0c;需要升级idea版本。idea中没有project language level没有17如何添加 - CSDN文库 别听这文章瞎扯淡 2021版本就是没有&#xff0c;直接卸载升级到最新版本就可以了。没办法…...

编程日记 2024/5/29 5:11:44

JavaScript数据类型与转换

JavaScript是一种弱类型语言&#xff0c;在定义变量的时候不用规定数据的类型&#xff0c;但这部表示JavaScript没有规定数据类型。 数值 JavaScript中数值类型不区分浮点数与整数&#xff0c;所有的数值都以浮点型来表示。另外JavaScript核心&#xff0c;Math还提供了大量的…...

编程日记 2024/5/29 5:10:43

三十、openlayers官网示例解析Double click, Drag and Zoom——第二次点击鼠标拖拽缩放地图效果、取消地图双击放大事件

这篇展示了如何在地图上添加第二次按下鼠标移动鼠标实现拖拽缩放地图效果。 官网demo地址&#xff1a; Double click, Drag and Zoom 官网介绍文字的翻译如下&#xff1a; 示例比较简单&#xff0c;直接贴代码&#xff1a; const map new Map({//添加第二次点击拖拽缩放地图i…...

编程日记 2024/5/29 5:09:42

前端基础入门三大核心之网络安全篇：TLS/SSL的魔法之旅

前端基础入门三大核心之网络安全篇&#xff1a;TLS/SSL的魔法之旅 TLS/SSL&#xff1a;数据安全的守护神工作原理&#xff1a;四步走&#xff0c;安全到家1. 握手&#xff0c;你好吗&#xff1f;代码示例&#xff08;伪代码&#xff09;&#xff1a;客户端发起握手请求 2. 身份…...

编程日记 2024/5/29 5:08:40

Flutter 中的 SnackBarAction 小部件：全面指南

Flutter 中的 SnackBarAction 小部件&#xff1a;全面指南 在 Flutter 中&#xff0c;SnackBar 是一种流行的用于提供轻量级反馈的方式&#xff0c;它可以在屏幕上短暂显示消息。SnackBarAction 则是与 SnackBar 结合使用的一种按钮组件&#xff0c;允许用户对显示的消息做出响…...

编程日记 2024/5/29 5:07:39

Point-Nerf 理论笔记和理解

文章目录 什么是point nerf 和Nerf 有什么区别Point Nerf 核心结构有哪些&#xff1f;什么是point-based radiance field? 点云位置以及置信度是怎么来Point pruning 和 Point Growing 什么是point nerf 和Nerf 有什么区别 基本的nerf 是通过过拟合MLP来完成任意视角场景的重…...

编程日记 2024/5/29 5:06:38

深度学习中的梯度消失和梯度爆炸问题

在深度学习领域&#xff0c;随着模型层数的增加&#xff0c;我们常常会遇到两个棘手的问题&#xff1a;梯度消失&#xff08;Vanishing Gradients&#xff09;和梯度爆炸&#xff08;Exploding Gradients&#xff09;。这两个问题严重影响了深度神经网络的训练效率和性能。本文…...

编程日记 2024/5/29 5:05:37

从安防摄像头到直播：手把手教你用ZLMediaKit搭建GB28181视频监控平台

从安防摄像头到直播&#xff1a;手把手教你用ZLMediaKit搭建GB28181视频监控平台 在智能安防和物联网快速发展的今天&#xff0c;视频监控系统的网络化和智能化已成为行业标配。GB28181作为国内视频监控领域的国家标准协议&#xff0c;实现了不同厂商设备间的互联互通。而ZLMed…...

编程新知 2026/3/31 11:23:11

深入解析C++中获取进程模块基址的高效实现方法

1. 为什么需要获取进程模块基址 在Windows系统编程中&#xff0c;获取进程模块基址是一个基础但极其重要的操作。简单来说&#xff0c;模块基址就是某个DLL或EXE文件被加载到内存中的起始地址。这个地址就像是模块在内存中的"门牌号"&#xff0c;有了它我们才能找到模…...

编程新知 2026/3/31 11:19:10

西门子PLC存储区全解析：从M区到DB块的实战避坑指南

西门子PLC存储区全解析&#xff1a;从M区到DB块的实战避坑指南 第一次接触西门子PLC编程时&#xff0c;面对M区、L区和DB块这些存储区概念&#xff0c;我完全摸不着头脑。记得有次调试设备&#xff0c;明明在线监控看到M0.0已经置位&#xff0c;但程序就是不执行相应动作&#…...

编程新知 2026/3/31 10:59:05

CH340/CH341安卓USB主机模式开发实战

1. CH340/CH341安卓USB主机模式开发入门 很多开发者第一次接触安卓USB主机模式开发时&#xff0c;都会遇到一个典型问题&#xff1a;为什么我的手机连上CH340模块后毫无反应&#xff1f;这通常是因为安卓设备默认工作在从机模式(USB Device Mode)&#xff0c;而连接串口设备需要…...

编程新知 2026/3/31 10:49:00

BG3ModManager模组管理工具完全指南

BG3ModManager模组管理工具完全指南 【免费下载链接】BG3ModManager A mod manager for Baldurs Gate 3. 项目地址: https://gitcode.com/gh_mirrors/bg/BG3ModManager 一、初识BG3ModManager BG3ModManager作为《博德之门3》的专用模组管理工具&#xff0c;为玩家提供…...

编程新知 2026/3/31 10:34:45

Umi-OCR：重新定义本地化文字识别的工作流范式

Umi-OCR&#xff1a;重新定义本地化文字识别的工作流范式 【免费下载链接】Umi-OCR OCR software, free and offline. 开源、免费的离线OCR软件。支持截屏/批量导入图片&#xff0c;PDF文档识别&#xff0c;排除水印/页眉页脚&#xff0c;扫描/生成二维码。内置多国语言库。 …...

编程新知 2026/3/31 10:14:25

AI应用架构师讲解AI在金融市场应用案例的模型构建

AI应用架构师讲解&#xff1a;AI在金融市场应用案例的模型构建 一、引入与连接&#xff1a;当AI成为金融市场的“智能分析师” 2023年&#xff0c;某头部量化基金的AI策略实现了35%的年化收益率&#xff0c;远超市场平均水平&#xff1b;同年&#xff0c;某国有银行用AI风险模型…...

编程新知 2026/3/31 9:22:04

Mermaid Live Editor：代码驱动图表设计的终极解决方案

Mermaid Live Editor&#xff1a;代码驱动图表设计的终极解决方案 【免费下载链接】mermaid-live-editor Edit, preview and share mermaid charts/diagrams. New implementation of the live editor. 项目地址: https://gitcode.com/GitHub_Trending/me/mermaid-live-editor…...

编程新知 2026/3/31 9:09:56

弦音墨影保姆级教程：解决‘视频加载失败’‘墨迹不跟随目标’等10类高频问题

弦音墨影保姆级教程&#xff1a;解决‘视频加载失败’‘墨迹不跟随目标’等10类高频问题 1. 系统简介与核心价值 「弦音墨影」是一款将人工智能技术与传统美学完美融合的视频分析工具。它采用水墨丹青的视觉风格&#xff0c;通过先进的Qwen2.5-VL多模态技术&#xff0c;让视频…...

编程新知 2026/3/31 7:07:00

RWKV7-1.5B-g1a效果展示：‘请用一句中文介绍你自己’真实响应

RWKV7-1.5B-g1a效果展示&#xff1a;请用一句中文介绍你自己真实响应 1. 模型简介 rwkv7-1.5B-g1a 是基于新一代 RWKV-7 架构开发的多语言文本生成模型&#xff0c;特别适合中文场景下的轻量级对话和文本生成任务。这个1.5B参数的版本在保持响应速度的同时&#xff0c;提供了…...

编程新知 2026/3/31 7:07:00