首页 > 教程 > 关键词  > 正文

CSS实现自动换行

2007-10-19 09:32 · 稿源:cz268.com

大家都知道连续的英文或数字能是容器被撑大,不能根据容器的大小自动换行,下面是 CSS如何将他们换行的方法!

对于div

1、(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准。

#wrap{white-space:normal; width:200px; }

或者

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

<div >ddd1111111111111111111111111111111111</div>

效果:可以实现换行

2、(Firefox浏览器)white-space:normal; word-break:break-all;overflow:hidden;同样的FF下也没有很好的实现方法,只能隐藏或者加滚动条,当然不加滚动条效果更好!

#wrap{white-space:normal; width:200px; overflow:auto;}

或者

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

<div >ddd1111111111111111111111111111111111111111</div>

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

对于table

1、(IE浏览器)使用样式table-layout:fixed;

以下为引用的内容:

<style>
.tb{table-layout:fixed}
</style>

<table width="80">
<tr>
<td>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>

效果:可以换行

2、(IE浏览器)使用样式table-layout:fixed与nowrap

以下为引用的内容:

<style>
.tb {table-layout:fixed}
</style>

<table width="80">
<tr>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>

效果:可以换行

3、(IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap

以下为引用的内容:

<style>
.tb{table-layout:fixed}
</style>

<table width=80>
<tr>
<td width=25% nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>

效果:两个td均正常换行

4、(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div

以下为引用的内容:

<style>
.tb {table-layout:fixed}
.td {overflow:hidden;}
</style>

<table width=80>
<tr>
<td width=25% nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
<td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
</tr>
</table>

这里单元格宽度一定要用百分比定义

效果:正常显示,但不能换行(注:在FF下还没有能使容器内容换行的好方法,只能用overflow将多出的内容隐藏,以免影响整体效果)

举报

  • 相关推荐
  • 破局产能焦虑!忆联全国产SSD M.2自动化方案驱动生产效率跃升

    忆联推出国内首个SSD M.2自动化解决方案,通过一体化测试平台、智能制造系统和MES系统协同,显著提升生产效率:单线UPH达480PCS/H,较人工提升50%;人力成本节省2人/台/天;产品不良率降至近100PPM。方案采用双六轴机械臂与AI视觉定位技术,支持多规格M.2 SSD混线生产,实现全流程数据追溯。该方案已成功保障多款主力SSD产品在销售旺季的高效交付,获得头部客户认可,助力国�

  • 微云全息(NASDAQ: HOLO)引领加密货币预测新纪元:HNFCS技术揭秘

    微云全息(NASDAQ:HOLO)开发了混合神经模糊控制系统(HNFCS),结合神经网络学习能力和模糊逻辑灵活性,能有效预测比特币等加密货币价格波动。该系统通过处理海量市场数据,动态调整预测模型,克服了传统方法在样本外预测和超时预测准确性方面的局限。HNFCS技术优势在于其自适应性和实时性,可扩展应用于多种金融场景,为投资者提供精准决策支持,有望成为加密货币市场的重要分析工具。

  • 锐捷网络重磅发布RG-UNC CS网络数字化平台:四大核心能力重塑企业网络管理新范式

    锐捷发布RG-UNC网络数字化平台CS系列产品,通过全网统一融合管理、组网编排及自动化部署、便捷准入与访问控制、全链业务保障与可视四大核心能力,重新定义企业网络管理标准。该平台基于微服务架构打造,支持服务组件灵活扩展与故障自愈,兼容第三方系统,满足不同规模客户需求。CS系列面向大中型园区,支持"管、控、析、维、营"全生命周期管理;AS系列作为轻量化衍生品,适合中小型园区。产品实现分钟级上线、策略随行、业务一键逃生等功能,显著提升网络部署效率与运维体验。

  • 2299元起!三星Galaxy Watch 8/Classic/Ultra智能手表发布

    三星今晚除了三款折叠屏手机之外,还推出了三款Galaxy Watch 8系列智能手表。 具体型号分别是Galaxy Watch 8、Galaxy Watch 8 Classic、Galaxy Watch 8 Ultra,起售价2299元。 三款产品统一采用了天圆地方”的设计语言,表壳为圆角矩形,表盘则是传统圆形。 三星Galaxy Watch 8 提供慕岩灰、星辉银两种配色,有44mm和40mm两种尺寸。 内部结构重新设计,组件集成度提升30%,整体厚度较上代减少1

  • ppt自动生成工具最好用的3个

    文章介绍了当前AI生成PPT工具的发展现状,重点推荐了"秒出PPT"这一专业平台。该平台具有三大特色功能:1)智能对话式生成,支持中途修改需求;2)提供三种编辑模式(纯文本、纯设计和文本+设计);3)支持导入文档自动排版,提供"保持原文"和"AI智能修改"两种模式。平台还拥有丰富的模板库,支持在线更换颜色、字体等设计元素。虽然需要购买会员,但相比市面上质量参差不齐的同类产品,该工具在交互体验和功能完整性上表现突出。

  • 自动化测试首选服务商:Testin云测有何核心优势?

    文章探讨了AI技术如何重构自动化测试体系。传统自动化测试面临维护成本高、跨平台兼容性差等痛点,而AI通过智能用例生成、缺陷预测、自适应测试等能力实现质变:1)NLP技术将需求文档自动转化为可执行测试用例;2)机器学习分析历史数据预测高风险模块;3)计算机视觉实现跨平台UI元素识别。Testin云测构建了覆盖设备层到场景层的完整测试生态,通过云原生架构支持2000+终端实时调度,结合AI中台实现测试效率提升1.5倍,助力某金融机构降低年度质量成本超千万元。AI与自动化测试的深度融合,正推动质量保障体系向智能化、集约化演进。

  • 天硕工业级M.2 NVMe SSD固态硬盘固件级加密构筑防破解安全体系

    天硕(TOPSSD)是国内领先的工业级存储解决方案提供商,其G55Pro M.2 NVMe工业级SSD采用100%国产元器件,支持3600MB/s高速读取,具备-55℃~85℃宽温域稳定运行能力。产品集成国密SM2/3/4算法与国际AES-256、SHA、RSA等加密技术,构建多重数据保护体系,满足军工、金融等领域对数据安全的高要求。通过硬件级掉电保护、智能擦除等功能,以及200万小时MTBF认证,为关键行业提供高性能、高可靠的存储解决方案。

  • 微信重大更新!聊天记录终于有救了:支持备份U盘、SSD

    ​今日,腾讯通过“微信公众号”发文,详细介绍了微信在聊天记录备份方面迎来的重大更新优化,这一消息迅速引发了广大用户的关注,尤其是那些长期受手机存储空间不足困扰的用户。 早在今年 6 月,微信iOS端就率先上线了全新的聊天记录备份功能,这一功能允许用户将手机里的聊天记录备份至外部存储设备,像U盘、SSD以及电脑等,从而有效释放手机空间。操作起来十�

  • 推动自动化产线研发!YOUMAGIC舒立缇研发公司与南林机械电子工程学院开展合作

    7月3日,YOUMAGIC舒立缇研发公司威脉医疗与南京林业大学机械电子工程学院在无锡国际生命科学创新园举行产学研合作签约仪式。双方将整合高校科研资源与企业产业优势,共同推动医疗健康领域技术创新与产业升级。威脉医疗专注高端医疗器械研发,已获得三类医疗器械注册证。此次合作将聚焦自动化产线研发,通过智能化技术提升医疗设备生产效率,推动行业转型升级。无锡高新区将为合作提供政策扶持与产业生态支持,助力科研成果转化落地。

  • 微信:聊天记录备份和迁移已支持外部存储设备 可自动备份

    微信新增了将聊天记录备份到外部存储设备的功能,这一“外援”的加入,让用户再也不用担心自家存储不够用。用户可以把聊天记录备份到U盘、移动硬盘等设备,而且当家庭用户共用一个硬盘或电脑进行备份时,也完全不会出现互相干扰、泄露隐私的情况。操作十分简单,只需点击“微信 - 我 - 设置 - 通用 - 聊天记录迁移与备份 - 备份与恢复”即可。

热文

  • 3 天
  • 7天