展会信息港展会大全

css英文字母数字自动换行且不断词方法
来源:互联网   发布日期:2016-03-25 16:12:39   浏览:2540次  

导读:本文章来给各位同学介绍css怎样让英文字母数字自动换行且不断词方法总结,有需要了解的同学可进入参考。当一个定义了宽度的块状元素中填充的全部为纯英文或者纯数字的时候,在IE和FF中都会撑大容器...

本文章来给各位同学介绍css怎样让英文字母数字自动换行且不断词方法总结,有需要了解的同学可进入参考。

当一个定义了宽度的块状元素中填充的全部为纯英文或者纯数字的时候,在IE和FF中都会撑大容器,不会自动换行

并且当数字或者英文中带有汉字时,会从汉字处换行,而纯汉字却可以自动换行。这个问题如何解决?先来认识一下两位主角word-wrap和word-break

word-break用来控制断词

三种取值:

(1)normal

(2)break-all(是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题。)

(3)keep-all

word-wrap用来控制换行

两种取值:

(1)normal

(2)break-word(此值用来强制换行,内容将在边界内换行,中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。)

解决方法

可以在CSS中加入

代码如下

复制代码

word-wrap:break-word;

word-break:break-all;

.(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条

代码如下

复制代码

#wrap{word-break:break-all; width:200px; overflow:auto;}

<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>

效果:容器正常,内容隐藏

对于table

1. (IE浏览器)使用table-layout:fixed;强制table的宽度,多余内容隐藏

代码如下

复制代码

<table style="table-layout:fixed" width="200">

<tr><td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td></tr></table>

效果:隐藏多余内容

2.(IE浏览器)使用table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行

代码如下

复制代码

<table width="200" style="table-layout:fixed;">

<tr><td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890</td><td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>

效果:可以换行

例子

代码如下

复制代码

<title>SS</title>

<link href="style_tu.css" rel="stylesheet" type="text/css" media="screen" />

<style type="text/css">

<!--

body,td,th {

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

color: #444444;

word-wrap: break-word;

word-break: break-all;

}

-->

</style>

英文对齐:<br>

<div style="font-size:12px;width:300;text-align:justify;text-justify:inter-ideograph">¨Crepower¨ Brand Belts, Chains and other Transmission Parts are manufactured under ISO9001 certified quality-control system. With improved quality material and well-organized production procedures, ¨Crepower¨ power transmission products have noticeably fatigue strength and long-service life.We can supply all types and sizes according to the related standards and customers’ requirements and</div>

<br>

赞助本站

人工智能实验室

相关热词: 开发 编程 android

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港