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

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

news 2026/3/30 22:50:47

在网页设计的广阔天地里，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

UE5模型加载避坑指南：为什么你的Runtime OBJ导入总是丢失材质？

UE5运行时OBJ材质丢失终极解决方案&#xff1a;从原理到工具函数全解析 当你在UE5中动态加载OBJ模型时&#xff0c;是否遇到过这样的场景&#xff1a;模型虽然成功加载&#xff0c;但所有材质都变成了难看的粉色默认材质&#xff1f;这可能是技术美术和程序化生成领域最常见的痛…...

编程新知 2026/3/30 22:34:00

Qwen-Image-Edit-2511保姆级教程：零基础学会AI修图，效果惊艳

Qwen-Image-Edit-2511保姆级教程&#xff1a;零基础学会AI修图&#xff0c;效果惊艳 1. 前言&#xff1a;为什么选择Qwen-Image-Edit-2511 如果你还在为Photoshop复杂的操作界面头疼&#xff0c;或者想快速实现专业级的图片编辑效果&#xff0c;那么Qwen-Image-Edit-2511绝对…...

编程新知 2026/3/30 20:46:42

E-Hentai-Downloader：高效漫画资源本地化解决方案

E-Hentai-Downloader&#xff1a;高效漫画资源本地化解决方案 【免费下载链接】E-Hentai-Downloader Download E-Hentai archive as zip file 项目地址: https://gitcode.com/gh_mirrors/eh/E-Hentai-Downloader 核心价值&#xff1a;重新定义漫画资源管理 E-Hentai-Do…...

编程新知 2026/3/30 20:42:41

StructBERT情感分类模型部署架构设计

StructBERT情感分类模型部署架构设计 1. 引言 情感分类是自然语言处理中的核心任务之一&#xff0c;能够自动分析文本中的情感倾向&#xff0c;在用户评价分析、舆情监控、智能客服等场景中发挥着重要作用。StructBERT作为基于Transformer架构的预训练模型&#xff0c;在中文…...

编程新知 2026/3/30 20:40:41

【系统分析师_知识点整理】 8.项目管理

核心考向&#xff1a;进度管理&#xff08;计算 选择最高频&#xff09;&#xff1a;关键路径、ES/EF/LS/LF、总浮动时间、自由浮动时间、PDM 四种依赖、进度偏差分析&#xff1b;范围管理&#xff1a;WBS、范围确认、范围控制、范围边界定义&#xff1b;成本管理&#xff1a;…...

编程新知 2026/3/30 18:52:56

CANopen协议学习与实践干货分享

CANopen协议代码&#xff0c;学习资料&#xff0c;包含CANfestival官方代码框架&#xff0c;官方字典生成工具&#xff0c;可自主设定心跳&#xff0c;pdo&#xff0c;sdo等内容参数&#xff0c;并包含已经移植完成的且带有详细注释的一个主站程序两个从站能正常通信&#xff0…...

编程新知 2026/3/30 18:38:50

128K上下文开源代码模型：DeepSeek-Coder-V2赋能开发者的技术解析

128K上下文开源代码模型&#xff1a;DeepSeek-Coder-V2赋能开发者的技术解析 【免费下载链接】DeepSeek-Coder-V2 项目地址: https://gitcode.com/GitHub_Trending/de/DeepSeek-Coder-V2 在软件开发效率日益成为竞争力核心指标的今天&#xff0c;开发者面临着代码生成质…...

编程新知 2026/3/30 18:30:47

n8n汉化踩坑全记录：从Docker界面到工作流编辑器的完整中文配置指南

n8n全栈汉化实战&#xff1a;从Docker环境到工作流编辑器的深度本地化方案 当德国开发者Jan Oberhauser在2019年将n8n开源时&#xff0c;可能没想到这个发音为"n-eight-n"的工具会成为自动化领域的新宠。作为一款基于节点连接的可视化编程平台&#xff0c;n8n让非技术…...

编程新知 2026/3/30 18:20:44

保姆级教程：用STM32CubeMX配置TIM1的PA8和PA11输出PWM波（STM32F103C8T6）

STM32CubeMX实战&#xff1a;从零配置TIM1的PA8/PA11输出PWM驱动电机 当你第一次拿到STM32F103C8T6这块蓝色的小板子时&#xff0c;可能会被密密麻麻的引脚吓到——但别担心&#xff0c;今天我们要用STM32CubeMX这个神器&#xff0c;像搭积木一样轻松配置出精准的PWM波形。我清…...

编程新知 2026/3/30 17:56:22

Zemax优化别再乱点‘锤子’了！一个光学新手的真实踩坑与避坑指南

Zemax优化实战&#xff1a;从新手误区到高效操作的进阶指南 刚接触Zemax的光学设计师们&#xff0c;往往会被软件中那个神秘的"锤形优化"按钮所吸引——看似简单的点击就能自动改善设计&#xff0c;这种诱惑难以抗拒。但很快就会发现&#xff0c;盲目依赖这个功能可能…...

编程新知 2026/3/30 17:54:21