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

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

文章

    <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;
}

目录
相关文章
|
前端开发 JavaScript C++
揭秘Web前端CSS引入秘籍:Link vs @import,你的选择决定页面加载速度,你选对了吗?
【8月更文挑战第26天】本文探讨了Web前端开发中CSS的引用方法,主要包括行内样式、内部样式表及外部样式表三种形式。重点对比了外部样式表中的`&lt;link&gt;`和`@import`两种引入方式。`&lt;link&gt;`作为HTML元素,在页面加载初期就开始加载样式资源,支持并行加载,对提高页面加载速度有益。而`@import`作为一种CSS规则,仅能在CSS文件中使用,其引入的样式表会在页面完成加载后才开始加载,可能导致渲染延迟且不支持并行加载。因此,在多数情况下,推荐采用`&lt;link&gt;`方式引入外部样式表,以确保更佳的性能表现和浏览器兼容性。
456 2
|
前端开发 容器
如何利用CSS实现三角形、扇形、聊天气泡框
如何利用CSS实现三角形、扇形、聊天气泡框
780 0
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
231 0
|
前端开发
css动画(仿微信聊天页面)
css动画(仿微信聊天页面)
|
移动开发 前端开发 HTML5
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
|
前端开发 C++
CSS【详解】 标准盒模型 VS IE 盒模型
CSS【详解】 标准盒模型 VS IE 盒模型
373 0
|
Java Spring 数据库
怎样动动手指就能实现数据操作?Spring Data JPA背后的魔法揭秘
【8月更文挑战第31天】在Java开发中,数据库交互至关重要。传统的JDBC操作繁琐且难维护,而Spring Data JPA作为集成JPA的数据访问层解决方案,提供了CRUD等通用操作接口,显著减少代码量。通过继承`JpaRepository`,开发者能轻松实现数据的增删改查,甚至复杂查询和分页也不再困难。本文将通过示例详细介绍如何利用Spring Data JPA简化数据访问层的开发,提升代码质量和可维护性。
270 0
|
前端开发
一键复制微信聊天框效果:HTML+CSS让网页聊天更生动!
一键复制微信聊天框效果:HTML+CSS让网页聊天更生动!
|
前端开发 C++ 容器
CSS【详解】居中对齐 (水平居中 vs 垂直居中)
CSS【详解】居中对齐 (水平居中 vs 垂直居中)
469 0
|
前端开发 C++ 容器
css【详解】—— 圣杯布局 vs 双飞翼布局 (含手写清除浮动 clearfix)
css【详解】—— 圣杯布局 vs 双飞翼布局 (含手写清除浮动 clearfix)
199 0

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    519
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    402
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    396
  • 4
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
    258
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    513
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    685
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1224
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    275
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1021
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    474