整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

CSS-中英文两端对齐,英文不断词,自动换行

SS:

{

word-break: keep-all;

word-wrap: break-word; // 只对英文起作用,以单词作为换行依据。

white-space: pre-wrap; //只对中文起作用,强制换行。

text-align:justify; //css英文语句的两端对齐:

text-justify:inter-ideograph;

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

禁止换行:

{

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis; //让多出的内容以省略号...来表达。但是这个属性主要用于IE等浏览器,Opera浏览器用-o-text-

white-space:nowrap;

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

单行文字如果超出2行用省略号表示:

.text {

width:220px;

word-break:break-all;

display:-webkit-box;

-webkit-line-clamp:2;

-webkit-box-orient:vertical;

overflow:hidden;

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

word-break 属性规定自动换行的处理方法。

normal 使用浏览器默认的换行规则。

break-all 允许在单词内换行。

keep-all 只能在半角空格或连字符处换行。

word-break 当行尾放不下一个单词时,决定单词内部该怎么摆放。

break-all: 强行上,挤不下的话剩下的就换下一行显示呗。

keep-all: 放不下了,那就另起一行展示,再放不下,也不退缩。

word-wrap 当行尾放不下时,决定单词内是否允许换行

normal: 单词太长,换行显示,再超过一行就溢出显示。

break-word: 当单词太长时,先尝试换行,换行后还是太长,单词内还可以换行。

white-space: normal | nowrap | pre | pre-wrap | pre-line

  • 1

pre: 保留所有的空格和回车,且不允许折行。

pre-wrap: 保留所有的空格和回车,但是允许折行。

pre-line: 会合并空格,且允许折行


text-align:justify 是专门为英文设计的,用来实现英文语句的两端对齐

text-justify :

auto | distribute |distribute-all-lines | distribute-center-last | inter-cluster | inter-ideograph | inter-word | kashida | newspaper

  • 1
  • 2

auto :

默认值。允许浏览器代理用户确定使用的两端对齐法则。

distribute :

处理空格很像newspaper ,适用于东亚文档。尤其是泰文。

distribute-all-lines :

两端对齐行的方式与distribute 相同,也同样不包含两段对齐段落的最后一行。适用于表意字文档

distribute-center-last :

未实现。

inter-cluster :

调整文本无词间空格的行。这种模式的调整是用于优化亚洲语言文档的。

inter-ideograph :

为表意字文本提供完全两端对齐。他增加或减少表意字和词间的空格

inter-word :

通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效

kashida :

通过拉长选定点的字符调整文本。这种调整模式是特别为阿拉伯脚本语言提供的。需要IE5.5+支持

newspaper :

通过增加或减少字或字母之间的空格对齐文本。是用于拉丁文字母表两端对齐的最精确格式

说明:设置或检索对象内调整文本使用的对齐方式。因为这个属性影响文本布局,所以text-align 属性必须被设置为justify 。此属性只作用于块对象。此属性对于currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为textJustify 。

以上方法对chrome(360也是chrome内核)无效,还需再加上下面代码:

word-break:break-all

使文本不换行,可以使用CSS的white-space属性,并将其值设置为nowrap。这样,文本将不会在单词之间换行,而是会继续在同一行上直到到达元素的边界。

white-space: nowrap;

你可以将此属性应用于需要保持文本在同一行的元素上,例如:

<div style="white-space: nowrap;">
  这是一个不会换行的文本块。
</div>

在这个例子中,div元素内的文本将不会换行。

节、分区和分割线

这些标记用于将页面分成多个部分。熟练地掌握这些标记将意味着构建出具有良好的结构和布局的页面,使其更加友好和易于阅读。

分区 - <div> </div>

div标记定义了HTML文件中的一个部分或分区。它通常包含需要组合在一起的标题、段落、表格或其他元素。通过设置<div class="">与css一起使用来设置网页某个部分的显示。

段落 - <p> </p>

p标记用来定义文本的段落,就像你在书中看到的那样,一旦文本达到屏幕边缘就会自动折到下一行。当另一个<p>标记用于开始下一个段落时,浏览器将在段落之间添加一些空白。p标记具有以下属性:

  • align="" - 段落中文本的对齐方式:left, center or right
  • width="" - 段落将占据页面的固定宽度或百分比,默认为100%

内联 - <span> </span>

span标记用于将内联元素组合在一起,例如句子中的几个单词,以便仅对这些单词应用css样式。span标记可以在div和p标记中使用,因为它不会创建新的块。

换行 - <br>

br标记相当于一个回车符,用于在新行开始文本。一行中的多个<br>标记将在网页上创建一个很大的垂直空间。

水平分隔线 - <hr>

hr标记通常被称为HTML行分隔符标记,创建一条通常用于视觉上分隔页面的水平线。它具有以下属性:

  • width="" - 线条将占用固定宽度,默认100%宽度
  • color="" - 线条颜色
  • noshade - 取消3D外观,创建一条平的实线分隔线

不换行 - <nobr> </nobr>

出于某种原因,你希望文本在一条直线上继续,而不是在屏幕的边缘换行,可以使用nobr。注意:这将迫使用户向右滚动以查看行的其余部分,这是一种糟糕的设计。

例子

下面是以上标记的示例:

浏览器显示内容如下所示: