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

div内英文不换行问题以及解决方案

news 文章来源：https://blog.csdn.net/mzp520lf/article/details/142099582 2025/5/5 14:45:21

div内英文不换行问题以及解决方案

  • div盒子中文字换行问题：
    • div中放中文的代码：
    • div中放英文的代码：
  • 解决办法
  • 注意

div盒子中文字换行问题：

div设置宽度以后，如果div中放的是中文，默认文字超过div宽度会自动换行，如果是英文，则默认是不换行的，即会超出div的宽度继续显示。这种情况，需要我们通过属性值进行强制换行

div中放中文的代码：

   <style> div{width: 200px;height: 200px;color: #fff;background-color: pink;padding: 10px;border-radius: 5px;margin: 0 auto;}</style><body> <div>人最宝贵的东西是生命，生命对人来说只有一次.因此，人的一生应当这样度过:当一个人回首往事时，不因虚度年华而悔恨，也不因碌碌无为而羞愧;这样，在他临死的时候，能够说,我把整个生命和全部精力都献给了人生最宝贵的事业</div>
</body>

效果：
请添加图片描述

div中放英文的代码：

  <style> div{width: 200px;height: 200px;color: #fff;background-color: pink;padding: 10px;border-radius: 5px;margin: 0 auto;}</style><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

效果(不会自动换行)：请添加图片描述

解决办法

  1. word-break:break-all;只对英文起作用，以字母作为换行依据
  2. word-wrap:break-word; 只对英文起作用，以单词作为换行依据
  3. white-space:pre-wrap; 只对中文起作用，强制换行
  4. white-space:nowrap; 强制不换行，都起作用
  5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现（部分浏览器支持）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>div{width: 30px;/* height: 30px; */border: 1px solid black;margin-top: 20px;}/*只对英文起作用，以字母作为换行依据*/.p1 {word-break: break-all;width: 150px;}/*--只对英文起作用，以单词作为换行依据*/.p2 {word-wrap: break-word;width: 150px;}/*只对中文起作用，强制换行*/.p3 {white-space: pre-wrap;width: 150px;}/*强制不换行，都起作用*/.p4 {white-space: nowrap;width: 10px;}/*不换行，超出部分隐藏且以省略号形式出现*/.p5 {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100px;}</style>
</head><body><div class="p1">hello world hello world hello world hello world hello world</div><div class="p2">hello world hello world hello world hello world hello world</div><div class="p3">hello world hello world hello world hello world hello world</div><div class="p4">hello world hello world hello world hello world hello world</div><div class="p5">hello world hello world hello world hello world hello world</div></body></html>

效果：
请添加图片描述

注意

使用上述属性一定要指定容器的宽度

相关文章：

div内英文不换行问题以及解决方案

div内英文不换行问题以及解决方案 div盒子中文字换行问题&#xff1a;div中放中文的代码&#xff1a;div中放英文的代码&#xff1a; 解决办法注意 div盒子中文字换行问题&#xff1a; div设置宽度以后&#xff0c;如果div中放的是中文&#xff0c;默认文字超过div宽度会自动换…...

编程日记 2024/9/11 4:15:58

『功能项目』DOTween动态文字【26】

打开上一篇25协程生成怪物模型的项目&#xff0c; 本章要做的事情是用DOTween插件做一个动态文字效果 首先在资源商店中免费下载一个DOTween插件 新建脚本&#xff1a;DowteenFlicker.cs 编写脚本&#xff1a; using DG.Tweening; using UnityEngine; using UnityEngine.UI;pu…...

编程日记 2024/9/11 4:11:52

经验笔记：框架（Framework）与库（Library）

框架&#xff08;Framework&#xff09;与库&#xff08;Library&#xff09;的经验笔记 引言 在现代软件开发过程中&#xff0c;框架&#xff08;Framework&#xff09;与库&#xff08;Library&#xff09;是两个不可或缺的概念。虽然它们都是为了提升开发效率和服务复用性…...

编程日记 2024/9/11 4:09:50

每日一题——第八十七题

题目&#xff1a;给出年月日&#xff0c;计算该日期是这一年的第几天 #include<stdio.h> #include<stdbool.h>bool isLeapYear(int year) {return (year % 4 0 && year % 100 ! 0) || (year % 400 0); }int dayOfYear(int year, int month, int day) {/…...

编程日记 2024/9/11 4:08:49

CTF——简单的《WEB》

文章目录 一、WEB1、easysql2、baby_web3、baby_sql4、upload_easy5、easygame拓展1.1拓展1.2 6、ht_ssti7、包容乃大 一、WEB 1、easysql 题目描述&#xff1a; sql注入漏洞 1.常用的sql注入测试语句 2.sql注入bypass 解题思路 这边提示基本给的也很完整的&#xff0c;不…...

编程日记 2024/9/11 4:07:48

【Nacos】报错之服务实例类型不允许改变

在使用Nacos配置服务的实例类型的时候&#xff0c;对服务的实例类型进行修改。 之前的非临时实例&#xff0c;修改为临时实例后&#xff0c;报错&#xff1a; com.alibaba.nacos.api.exception.NacosException: errCode: 400, errMsg: Current service DEFAULT_GROUPproduct-…...

编程日记 2024/9/11 4:05:46

SRS流媒体服务器从入门到精通（其一，环境搭建）

欢迎诸位来阅读在下的博文~ 在这里&#xff0c;在下会不定期发表一些浅薄的知识和经验&#xff0c;望诸位能与在下多多交流&#xff0c;共同努力! 江山如画&#xff0c;客心如若&#xff0c;欢迎到访&#xff0c;一展风采 文章目录 一、SRS简介二、SRS的应用场景三、环境搭建…...

编程日记 2024/9/11 4:04:44

Java Native Interface (JNI) 简介

Java Native Interface (JNI) 概述 Java Native Interface (JNI) 是 Java 提供的一种接口&#xff0c;用于允许 Java 应用程序与本地&#xff08;Native&#xff09;代码进行交互。通过 JNI&#xff0c;Java 代码可以调用 C/C 等其他语言编写的库&#xff0c;反之亦然。JNI 的主…...

编程日记 2024/9/11 4:02:38

navigator.mediaDevices.getUserMedia检查用户的摄像头是否可用，虚拟摄像头问题

在Web开发中&#xff0c;检查用户的摄像头是否可用是一个常见的需求&#xff0c;尤其是在需要视频聊天或录制视频的应用程序中。navigator.mediaDevices.getUserMedia() API 提供了这一功能&#xff0c;它允许你请求访问用户的媒体设备&#xff0c;如摄像头和麦克风。虽然这个A…...

编程日记 2024/9/11 4:01:37

跨境网红营销SOP流程1.0丨出海笔记

品牌出海利用红人营销基本是标配了&#xff0c;KOL 社交媒体是绝对的带货神器。比如美国歌手蕾哈娜Rihanna 的美妆品牌 Fenty Beauty 上市开卖后40天就达到了1亿美元&#xff0c;火遍全球美妆圈。例子和废话少说&#xff0c;其实大小红人都有用。 之前几位大神已经在出海笔记分…...

编程日记 2024/9/11 4:00:36

Jedis，SpringDataRedis

快速入门 导入依赖 <!--jedis--><dependency><groupId>redis.clients</groupId><artifactId>jedis</artifactId><version>3.7.0</version></dependency><!--单元测试--><dependency><groupId>org.ju…...

编程日记 2024/9/11 3:59:34

增量模型的优点例题

答案&#xff1a;D 解析&#xff1a;增量模型可以快速开发一个样品供客户查看 选项B 早期的增量作为模型&#xff0c;从而可以加强系统后续需求的理解 一开始给客户一个样本&#xff0c;客户根据样品修改需求 选项C 增量模型就是开发一个个增量模型&#xff0c;供客户使用…...

编程日记 2024/9/11 3:58:33

求绝对值

计算并输出一个实数的绝对值。从键盘任意输入一个实数&#xff0c;不使用计算绝对值函数编程计算并输出该实数的绝对值 输入格式: 输入任一实数。 输出格式: 输出的绝对值包含两位小数。 输入样例: 在这里给出一组输入。例如&#xff1a; -2.5输出样例: 在这里给出相应的输出。…...

编程日记 2024/9/11 3:57:32

AlphaNovel的身份验证失败了..........

我的AlphaNovel的这个身份验证失败了,不知道失败原因是什么... 前两周在网上看到这个项目,在国外这个网站搬运国内小说,但是前提是要通过这个身份验证,可是我等了十多天,结果身份验证失败了,有也在做这个的同志吗? 你们身份验证怎么样...

编程日记 2024/9/11 3:56:31

Sapiens：人类视觉模型的基础

文章目录 摘要1、引言2、相关工作3、方法3.1、Humans-300M 数据集3.2、预训练3.3、二维姿态估计3.4、身体部位分割3.5、深度估计3.6、表面法线估计 4、实验4.1、实现细节4.2、二维姿态估计4.3、身体部位分割4.4、深度估计4.5、表面法线估计4.6、讨论 5、结论 摘要 我们介绍了 …...

编程日记 2024/9/11 3:54:29

“健康中国 医路无忧——公益联盟”积极响应，国内首支公益陪诊师志愿队伍正式成立

在快节奏的现代生活中&#xff0c;就医不再是简单的“看病”那么简单。面对复杂的医疗流程、专业的医学术语、以及在陌生环境中的焦虑&#xff0c;患者及家属往往感到无所适从。此时&#xff0c;陪诊服务如同一束光&#xff0c;照亮了就医之路&#xff0c;它的重要性不仅体现在…...

编程日记 2024/9/11 3:50:24

Java 创建对象方法的演变

1、普通 Java 代码 public class Rectangle {private int width;private int length;public Rectangle() {System.out.println("Hello World!");}public void setWidth(int widTth) {this.width widTth;}public void setLength(int length) {this.length length;}…...

编程日记 2024/9/11 3:48:13

Netty中用到了哪些设计模式

Netty作为一个高性能的网络通信框架&#xff0c;里面有很多优秀的代码值得我们学习&#xff0c;今天我们一起看下Netty中用到了哪些设计模式。 一、单例模式 Netty通过 NioEventLoop 将通道注册到选择器&#xff0c;并在事件循环中多路复用它们。其中提供了一个选择策略对象 S…...

编程日记 2024/9/11 3:46:11

第67期 | GPTSecurity周报

GPTSecurity是一个涵盖了前沿学术研究和实践经验分享的社区&#xff0c;集成了生成预训练Transformer&#xff08;GPT&#xff09;、人工智能生成内容&#xff08;AIGC&#xff09;以及大语言模型&#xff08;LLM&#xff09;等安全领域应用的知识。在这里&#xff0c;您可以找…...

编程日记 2024/9/11 3:45:09

Chrome 浏览器插件获取网页 window 对象（方案三）

前言 最近有个需求&#xff0c;是在浏览器插件中获取 window 对象下的某个数据&#xff0c;当时觉得很简单&#xff0c;和 document 一样&#xff0c;直接通过嵌入 content_scripts 直接获取&#xff0c;然后使用 sendMessage 发送数据到插件就行了&#xff0c;结果发现不是这…...

编程日记 2024/9/11 3:43:07

动态规划-分割回文串ⅡⅣ

在本篇博客中将介绍分割回文串Ⅱ以及分割回文串Ⅳ这两个题目。 分割回文串Ⅱ 题目描述 给你一个字符串 s&#xff0c;请你将 s 分割成一些子串&#xff0c;使每个子串都是回文串。 返回符合要求的 最少分割次数 。 示例&#xff1a; 输入&#xff1a;s "aabac" 输…...

编程日记 2024/9/11 3:42:06

Python编码系列—Python项目维护与迭代：持续进化的艺术

&#x1f31f;&#x1f31f; 欢迎来到我的技术小筑&#xff0c;一个专为技术探索者打造的交流空间。在这里&#xff0c;我们不仅分享代码的智慧&#xff0c;还探讨技术的深度与广度。无论您是资深开发者还是技术新手&#xff0c;这里都有一片属于您的天空。让我们在知识的海洋中…...

编程日记 2024/9/11 3:41:05

【鸿蒙开发工具报错】Build task failed. Open the Run window to view details.

Build task failed. Open the Run window to view details. 问题描述 在使用deveco-studio 开发工具进行HarmonyOS第一个应用构建开发时&#xff0c;通过Previewer预览页面时报错&#xff0c;报错信息为&#xff1a;Build task failed. Open the Run window to view details.…...

编程日记 2024/9/11 3:40:04

k8s集群部署：容器运行时

1. 卸载旧版本 Docker # 卸载旧版本的 Docker 组件 sudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engine注释: 该命令会移除系统中现有的 Docker 及其相关组件&#xff0…...

编程日记 2024/9/11 3:39:02

PHP7 的内核结构

PHP7 是 PHP 语言的一个重要版本&#xff0c;带来了许多性能提升和语言特性改进。要深入了解 PHP7 的内核&#xff0c;我们需要探讨其设计和实现的关键方面&#xff0c;包括 PHP 的执行模型、内存管理、编译和优化过程等。 1. PHP7 的内核结构 1.1 执行模型 PHP 是一种解释型…...

编程日记 2024/9/11 3:38:01

JVM合集

序言： 1.什么是JVM？ JVM就是将javac编译后的.class字节码文件翻译为操作系统能执行的机器指令翻译过程： 前端编译：生成.class文件就是前端编译后端编译：通过jvm解释（或即时编译或AOT）执行.class文件时跨平台的，jvm并不是跨平台的通过javap进行反编译2.java文件是怎么变…...

编程日记 2024/9/11 3:35:58

tomcat端口被占用解决方法

在安装目录的conf下修改server.xml文件&#xff0c;修改后保存重启即可...

编程日记 2024/9/11 3:34:57

全新的训练算法：Reflection 70B进入大众的视野

在2024年9月6日&#xff0c;大模型的圈子迎来了一位新成员——Reflection 70B&#xff0c;它横扫了MMLU、MATH、IFEval、GSM8K等知名的模型基准测试&#xff0c;完美超越了GPT-4o&#xff0c;同时也超越了Claude3.5 Sonnet成为了新的大模型之王&#xff0c;Reflection 70B到底是…...

编程日记 2024/9/11 3:32:55

静态标注rtk文件参数解析

目录 在静态标注中&#xff0c;rtk(Real-Time Kinematic)文件的主要作用 rtk文件包含几种类型数据 具体作用 具体示例 %RAWIMUSA #INSPVAXA $GPRMC 背景&#xff1a; 最近工作中涉及到静态标注 slam相关&#xff0c;因为初入门&#xff0c;对于rtk文件中有很多参数&…...

编程日记 2024/9/11 3:31:54

TensorFlow和PyTorch小知识

TensorFlow和PyTorch是当前最流行的两个开源机器学习库&#xff0c;它们都广泛用于研究和工业界的深度学习项目。下面是对它们的介绍&#xff1a; 1&#xff0c;TensorFlow - **开发背景&#xff1a;** TensorFlow最初由Google Brain Team开发&#xff0c;并于2015年11月开源…...

编程日记 2024/9/11 3:28:49