css排版—— 一篇优雅的文章(中英文) vs 聊天框的特别排版

news2024/10/6 18:33:54

文章

在这里插入图片描述

    <div class="contentBox">
      <p>这是一篇范文——仅供测试使用</p>
      <p>
        With the coming of national day, I have a one week holiday. I really
        expect to it, because it want to have a short trip during these days. I
        will travel to Jiuzhai Valley with my parents for three days. I have
        heard that the scenery of Jiuzhai Valley is very beautiful in autumn
        that it’s the best time to travel there. Autumn is my most favorite
        season so I want to enjoy the beauty of such a wonderful place. I do
        some preparations for this trip. For example, I search the Internet to
        see the travel raiders and I have known where the most attracting place
        is and where to live in. I am sure it will be a wonderful journey. There
        are only several days for the coming trip, but I have been too excited
        to wait.
      </p>
      <p>
        当站在长城之上,不经意间触及烽火的余温,偶然间听到长城内外的风声,你,想起了什么?当伫立江南渡口,看着来往的孤帆,望着秦淮河上的潋滟波光,我们丢失了什么?
      </p>
      <p>
        人说和平是狼烟不再,河清海晏的盛世景象,可在我看来,一个民族的血气和潇洒、自信与魄力比任何一种外在的繁华都要可贵。当民族血气与时代的变换相得益彰时,才是真正的“和”。
      </p>
      <p>
        在函谷关与崤山之间流传着的《秦风》,那只是阵前助威的战歌吗?那只是秦人日常生活的写照吗?从来都不是。一个让六国震颤的国家,一支令魏武卒都汗颜的虎狼之师,总有他的不屈和不朽。“岂曰无衣,与子同袍。赳赳老秦,共赴国难。”这种国家血气和自信,在西陲的雁鸣声里,怎么渐行渐远了?石敬瑭将燕云十六州拱手相让,赵构偏安江南,自毁长城,国力不支是理由吗?没有了勇气和血气的国家,只能成为历史的附庸。他们无力拨回秦时明月的历史轮盘,又如何能够激活静默了近千年的“和”?
      </p>
      <p>
        时势造英雄,乱世演绎不朽,金戈铁马中的每一个燃烧的灵魂,每一颗跳动的心脏,都被以姓名的方式刻入史笺,浩气长存。可为什么在当下物欲横流、灯红酒绿的深处,血脉涌动的声音如此微弱?天命星相从来不会垂怜弱者,只有强者才能演绎历史的天空最耀眼的血色光芒,才能让古今之“和”融会成一曲长歌,弱者只能在旷地里仰望星辰,却找不到自己的归属。可灯火辉煌醉中生梦死,逐渐麻木了的人们却让铜臭酒气掩盖了所剩无几的血气。失去民族阳刚的人们恍若失去了栋梁的楼阁,仿佛一阵清风也能让其轰然崩塌。
      </p>
    </div>
.contentBox {
  width: 400px;
  height: 500px;
  overflow-y: scroll;
  border: 1px solid gray;
  padding: 10px;
  margin: 10px;
  line-height: 1.5;
  font-family: "Times New Roman", "Microsoft YaHei", "宋体";
  word-wrap: break-word;
  /* 分散对齐 */
  text-align: justify;
  /* 最后一行左对齐*/
  text-align-last: left;
  /*兼容所有浏览器,inter-ideograph的字面意思是“国际象形文字” */
  text-justify: inter-ideograph;
}
p {
  text-indent: 2em;
  margin-bottom: 10px;
}

聊天框

在这里插入图片描述

    <div class="contentBox">
      <p>你说啥????????????</p>
      <p>ni hao</p>
    </div>
.contentBox {
  width: 200px;
  border: 1px solid gray;
  padding: 10px;
  margin: 10px;
  line-height: 1.5;
  font-family: "Times New Roman", "Microsoft YaHei", "宋体";
  line-break: anywhere;
  /* 分散对齐 */
  text-align: justify;
  /* 最后一行左对齐*/
  text-align-last: left;
  /*兼容所有浏览器,inter-ideograph的字面意思是“国际象形文字” */
  text-justify: inter-ideograph;
}

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

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

相关文章

结合双向LSTM和注意力机制的DQN-CE算法船舶能量调度

Title:Ship Energy Scheduling with DQN-CE Algorithm Combining Bi-directional LSTM and Attention Mechanism 【Applied Energy】结合双向LSTM和注意力机制的DQN-CE算法船舶能量调度(中科院1区Top,IF 11.2) 具体实现方法可以参考原文:论文地址 欢迎大家引用和交流,具体…

如何在在线Excel文档中规范单元格输入

在日常的工作中&#xff0c;我们常常需要处理大量的数据。为了确保数据的准确性和可靠性。我们需要对输入的数据进行规范化和验证。其中一个重要的方面是规范单元格输入。而数据验证作为Excel中一种非常实用的功能&#xff0c;它可以帮助用户规范单元格的输入&#xff0c;从而提…

学习日记01——JS基础01

JavaScrip简单介绍 是前端脚本语音&#xff0c;快速入门js基本语法&#xff0c;本篇文章涉及到JavaScrip基础的变量定义&#xff0c;数据类型和基础的流程控制语句。 使用到的工具 1&#xff0c;vscode 2&#xff0c;chrome浏览器 js的变量定义 准备工作&#xff08;简单的h…

【论文阅读】Progressive Spatio-Temporal Prototype Matching for Text-Video Retrieval

资料链接 论文链接&#xff1a;https://openaccess.thecvf.com/content/ICCV2023/papers/Li_Progressive_Spatio-Temporal_Prototype_Matching_for_Text-Video_Retrieval_ICCV_2023_paper.pdf 代码链接&#xff1a;https://github.com/imccretrieval/prost 背景与动机 文章发…

HTML使用canvas绘制海报(网络图片)

生成前&#xff1a; 生成后&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8"><title>媒体参会嘉宾邀请函生成链接</title><link rel"stylesheet" href"https://cdn.jsdelivr.net/npm/vant2.10…

矩阵键盘独立接口设计(Keil+Proteus)

前言 实验&#xff1a;通过4*4的矩阵键盘&#xff0c;按下某个按钮之后会在数码管上面显示对应的键号。&#xff08;0~F&#xff09; 基础操作参考这篇博客&#xff1a; LED数码管的静态显示与动态显示&#xff08;KeilProteus&#xff09;-CSDN博客https://blog.csdn.net/w…

maven 上传本地jar包到nexus

maven上传命令 mvn deploy:deploy-file -DgroupIdcom.microsoft.sqlserver -DartifactIdsqljdbc4 -Dversion4.0 -Dpackagingjar -DfileC:\java\top-sdk-java-1.0.1-lib\lib\bcprov-jdk16-1.46.jar -Durlhttp://ip:port/repository/maven-releases/ -DrepositoryIdsnapshot…

一个Linux自动备份脚本的示例

一个简单的Linux自动备份脚本的示例&#xff0c;根据需要进行自定义&#xff1a; 请确保按照您的需求修改source_dir和backup_dir为要备份的源目录和备份目录的路径。此脚本使用tar命令创建一个以当前日期命名的压缩备份文件&#xff0c;并在备份完成后检查是否成功。此外&…

vite基础学习笔记:13.Dialog 对话框 (用户注册与登录)

说明&#xff1a;自学做的笔记和记录&#xff0c;如有错误请指正 1. Dialog 对话框组件 目标效果&#xff1a;点击“登录/注册”&#xff0c;弹框 &#xff08;1&#xff09;创建全局组件&#xff0c;在官网中查询代码粘贴 &#xff08;2&#xff09; 注册和使用全局组件 &a…

Android ConstraintLayout

0dp 充满约束 to左侧是控件本身,to右边是约束条件 例如: app:layout_constraintBottom_toBottomOf"id/image_1" app:layout_constraintTop_toBottomOf"id/image_1" 指定权重: app:layout_constraintHorizontal_weight"" app:layout_constra…

[云原生案例2.1 ] Kubernetes的部署安装 【单master集群架构 ---- (二进制安装部署)】

文章目录 1. 常见的K8S安装部署方式1.1 Minikube1.2 Kubeadm1.3 二进制安装部署 2. Kubernetes单master集群架构 ---- &#xff08;二进制安装部署&#xff09;2.1 前置准备2.2 操作系统初始化2.3 部署 docker引擎 ---- &#xff08;所有 node 节点&#xff09;2.4 部署 etcd 集…

cygwin编译redis、nssm配置redis服务

一、总结 本文尝试了redis-7.2.1、redis-7.2、redis-7.0.12、redis-6.2.13&#xff0c;其中redis-7.0.12、redis-6.2.13下载下来后&#xff0c;没有修改redis项目的任何代码&#xff0c;直接在解压后的根目录下执行make命令就可以成功&#xff0c; 结果总结如下&#xff1a; r…

京东数据分析:2023年9月京东笔记本电脑行业品牌销售排行榜

鲸参谋监测的京东平台9月份笔记本电脑市场销售数据已出炉&#xff01; 9月份&#xff0c;笔记本电脑市场整体销售下滑。鲸参谋数据显示&#xff0c;今年9月份&#xff0c;京东平台上笔记本电脑的销量将近59万&#xff0c;环比下滑约21%&#xff0c;同比下滑约40%&#xff1b;销…

RTMP协议详解及Wiresahrk抓包分析

文章目录 前言一、RTMP 简介1、RTMP 介绍2、变种 二、wireshark 抓 RTMP 报文1、搭建 RTMP 服务器2、运行 RTMP 服务器3、打开 wireshark4、ffmpeg 推流5、VLC 拉流 三、RTMP 协议详解1、前言2、总体介绍3、握手4、RTMP Chunk Stream①、message&#xff08;消息&#xff09;②…

人工智能-卷积神经网络之多输入多输出通道

多输入多输出通道 每个图像的多个通道和多层卷积层。例如彩色图像具有标准的RGB通道来代表红、绿和蓝。 但是到目前为止&#xff0c;我们仅展示了单个输入和单个输出通道的简化例子。 这使得我们可以将输入、卷积核和输出看作二维张量。 当我们添加通道时&#xff0c;我们的输…

Qt 项目实战 | 音乐播放器

Qt 项目实战 | 音乐播放器 Qt 项目实战 | 音乐播放器播放器整体架构创建播放器主界面 官方博客&#xff1a;https://www.yafeilinux.com/ Qt开源社区&#xff1a;https://www.qter.org/ 参考书&#xff1a;《Qt 及 Qt Quick 开发实战精解》 Qt 项目实战 | 音乐播放器 开发环…

揭开堆叠式自动编码器的强大功能

一、介绍 在不断发展的人工智能和机器学习领域&#xff0c;深度学习技术因其处理复杂和高维数据的能力而广受欢迎。在各种深度学习模型中&#xff0c;堆叠式自动编码器是一种多功能且功能强大的工具&#xff0c;可用于特征学习、降维和数据表示。本文探讨了堆叠式自动编码器在深…

UE5、CesiumForUnreal实现加载GeoJson绘制单面(Polygon)功能(StaticMesh方式)

文章目录 1.实现目标2.实现过程2.1 实现原理2.1.1 数据读取2.1.2 三角剖分2.1.3 创建StaticMesh2.2 应用测试2.2.1 具体代码2.2.2 蓝图应用测试3.参考资料1.实现目标 通过读取本地GeoJson数据,在UE中以StaticMeshComponent的形式绘制出面数据,支持Editor和Runtime环境,GIF动…

高压放大器能够在哪里使用呢

高压放大器是一种重要的电子设备&#xff0c;可以在许多不同的领域和应用中使用。下面西安安泰将详细介绍高压放大器的应用。 医学影像&#xff1a;高压放大器在医学影像领域具有广泛的应用。医学影像设备&#xff08;如X射线机、CT扫描仪等&#xff09;需要高压来产生足够的能…

通俗理解repartition和coalesce区别

官方的解释 reparation 返回一个具有恰好numPartitions分区的新RDD。 可以增加或减少此RDD中的并行级别。在内部,reparation会使用shuffle来重新分发的数据。 如果要减少此RDD中的分区数量,请考虑使用coalesce,这样可以避免执行shuffle。 coalesce 返回一个新的RDD,该RDD被…