专业IT网络知识平台,分享IT百科知识、生活百科知识解答!

易企推科技
易企推科技

巧用css实现强制不换行、自动换行、强制换行

来源:小易整编  作者:小易  发布时间:2023-09-04 01:28
摘要:我们在写页面代码的时候,有时把一个表格的宽度定死后会出现里面的文字不见了,特别是英文。这就是他换行了所导致的,这时我们就需要加些CSS元素让它来听我们的话!根据自己以往的,也参考了些网上的文章,具体如下:强制不换行pwhite-space...

我们在写页面代码的时候,有时把一个表格的宽度定死后会出现里面的文字不见了,特别是英文。这就是他换行了所导致的,这时我们就需要加些CSS元素让它来听我们的话!根据自己以往的,也参考了些网上的文章,具体如下:

巧用css实现强制不换行、自动换行、强制换行

强制不换行

p{white-space:nowrap;}

自动换行

p{word-wrap: break-word;word-break: normal;}

强制英文单词断行

p{word-break:break-all;}

============================================

CSS设置不转行:

overflow:hidden 隐藏white-space:normal 默认pre 换行和其他空白字符都将受到保护nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象

设置强行换行word-break:normal ; 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法

============================================

看了以上的介绍,赶快试一下,看看效果吧!

英文不换行

CSS里加上 word-break: break-all; 问题解决。这个问题只有IE才有,在FF下测试,FF可以自己加滚动条,这样也不影响效果

建议大家做Skin时,记得在body里加 word-break: break-all; 这样可以解决IE的框架被英文撑开的问题

以下引用word-break的说明, 注意word-break 是IE5+专有属性

语法:

word-break : normal | break-all | keep-all

参数:

normal :  依照亚洲语言和非亚洲语言的文本规则,允许在字内换行break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本

说明:

设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。对于中文,应该使用break-all 。对应的脚本特性为wordBreak。请参阅我编写的其他书目。

示例:

p {word-break : break-all; }


本文地址:网络知识频道 https://www.hkm168.com/jiqiao/1048969.html,易企推百科一个免费的知识分享平台,本站部分文章来网络分享,本着互联网分享的精神,如有涉及到您的权益,请联系我们删除,谢谢!


网络知识
小编:小易整编
相关文章相关阅读
  • 用U盘轻松实现一键重装系统的小白装机教程

    用U盘轻松实现一键重装系统的小白装机教程

    在现代社会,电脑已经成为人们生活中不可或缺的工具。然而,由于各种原因,我们有时候需要重装电脑系统来解决一些问题或提升性能。但是,对于一些小白用户来说,重装系统可能是一项困难的任务。因此,本文将介绍一款小白一键重装系统的u盘装机教程,帮助小白...

  • PHP调用美联软通短信接口实现短信发送

    PHP调用美联软通短信接口实现短信发送

    随着人们生活水平的提高和科技的发展,短信已成为人们交流的主要方式之一,越来越多的企业开始通过短信平台来实现营销、提醒等功能。在这个过程中,短信接口的选择显得尤为重要。本文将介绍如何通过php调用美联软通短信接口实现短信发送。一、美联软通短信...

  • php怎么实现对字符串的排序

    php怎么实现对字符串的排序

    实现步骤:1、利用str_split()函数将字符串转为字符数组,语法“str_split(字符串)”;2、使用asort()或arsort()函数来对字符数组进行升序排序或降序排序,语法“asort(字符数组)”或“arsort(字符数组...

  • CSS什么是圣杯布局?

    CSS什么是圣杯布局?

    在css中,圣杯布局是指两边盒子宽度固定,中间盒子自适应的三栏布局,其中,中间栏放到文档流前面,保证先行渲染;三栏全部使用“float:left”浮动,并配合left和right属性。前端的两个经典布局想必大家都有多了解--圣杯布局和双飞翼...

  • python怎么实现三子棋游戏

    python怎么实现三子棋游戏

    一、基本流程三子棋游戏实现逻辑如下:1、创建初始化3*3棋盘;2、玩家执U子,先进行落子;3、胜负判定【胜、负、和棋】,若胜负未分,则继续如下4、电脑执T子,进行落子;5、胜负判定,若胜负未分,则从步骤2继续执行二、基本步骤1、菜单界面选择...

  • css怎么给table设置样式

    css怎么给table设置样式

    在网页设计中,表格是常用的元素之一。通过表格的使用,我们可以更好地展示信息和数据。然而,在使用表格时,如果不设置样式,页面会显得单调、无趣,也不利于信息的传达。因此,本文将介绍如何使用css对表格进行样式设置。设置表格基本样式我们可以使...

  • css设置网页字体

    css设置网页字体

    css是层叠样式表的缩写,是用于网站样式设计的语言。其中,设置网页字体是css中的一个重要方面。如何使用css设置网页字体,将为我们带来更好的视觉体验,提升页面的可读性和专业感。本文将主要介绍css中的字体相关设置,包括字体样式、字体大小以...

  • css怎么设置水平对齐

    css怎么设置水平对齐

    css设置水平对齐的方法:1、使用“text-align:center;”样式设置文本元素水平居中对齐;2、使用“margin:auto;”样式设置块状元素水平居中对齐。本教程操作环境:windows7系统、CSS3&&HT......

  • 周排行
  • 月排行
  • 年排行

精彩推荐