css代码用词,巧用CSS解决中文断词换行的问题
中文词组有没有办法禁止它拆字换行?
控制英文单词是否断词换行,方法很多,在这里不做讨论。
中文字由于是由单个汉字组成,所以禁止拆分词组换行,实现起来就没那么容易。在这里就介绍一个实现禁止中文词组换行的方法:
例1:默认情况下是这样的。
代码:
哈尔滨 成都
效果:
北京 上海 广州 深圳 天津 呼和哈特 重庆
武汉 沈阳 杭州 哈尔滨 成都
例2:使用禁止换行(white-space: nowrap;)会让整段文字都不换行。
代码:
杭州 哈尔滨 成都
效果:
北京
上海 广州 深圳 天津 呼和哈特 重庆 武汉 沈阳 杭州 哈尔滨 成都
例3:给各个词组套一个带禁止换行(white-space: nowrap;)的span标签。
代码如下:
style="white-space:nowrap;">北京
style="white-space:nowrap;">上海
style="white-space:nowrap;">广州
style="white-space:nowrap;">深圳
style="white-space:nowrap;">天津
style="white-space:nowrap;">呼和哈特
style="white-space:nowrap;">重庆
style="white-space:nowrap;">武汉
style="white-space:nowrap;">沈阳
杭州
哈尔滨
style="white-space:nowrap;">成都
效果如下:
北京 上海 广州 深圳 天津 呼和哈特 重庆 武汉 沈阳 杭州 哈尔滨 成都
大功告成了!
css代码用词,巧用CSS解决中文断词换行的问题相关推荐
- css代码应该放html哪里,css代码放到哪里?
CSS以HTML为基础,提供了丰富的功能,如字体.颜色.背景的控制及整体排版等.css代码需要放到哪里? 是不是一定写到html文件里面呢? 下面给大家介绍一下. css代码的定义通常有三种方式,内部 ...
- html链接外部css代码,html如何调用外部css?
CSS样式表可以单独存放在一个CSS文件中,这样我们就可以在多个页面中使用同一个CSS样式表.CSS样式表理论上不属于任何页面文件,在任何页面文件中都可以将其引用.这样就可以实现多个页面风格的统一. ...
- 浏览器自定义css代码,根据浏览器不同设置CSS
[实例名称] 根据浏览器不同设置CSS [实例描述] 不同的浏览器在同样的CSS下显示效果可能不同,有时候为了保证界面的一致性,需要根据浏览器的不同设置相应的CSS. [实例代码] 标题页-学无忧(w ...
- css实用技巧:巧用css实现两栏等高布局
又到了利用碎片学习的时间了,看看这个小案例,超级实用的一个css技巧:css实现两栏等高布局. 样式方面: <style> #box{ width:900px; font-size:28p ...
- 百度新闻html css代码,仿百度首页XHTML+CSS代码
百度一下,就就知道了 /* *{margin:0px;padding:0px;font-size:14px;} 不要使用*,会影响整体的速度,只对需要重置的标签进行定义就可以了,还有当一个属性的数值为 ...
- html链接css代码link,link标签链接css放在哪?
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择.使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观.在HTML页面中可以使用link标签链接外部样式表. 在HTML中使用link ...
- 跨浏览器开发:CSS代码的金科玉律
作为Web设计师,你的网站在各种浏览器中有完全一样的表现是很多人的目标,然而这是一个永远无法真正实现的目标,很多人认为,完美的跨浏览器兼容并不必要,这样说虽然没错,但在很多情形,一种近似的兼容还是很容 ...
- css 设置表格右边有图片_20个web前端HTML5初学者实用CSS代码技巧
在本文中,我们想与您分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合.有一些是面向CSS初学者的,有一些知识点是进阶型的.希望每个人通过这篇文章都能学到对自己有用的知识. 1.注意外边 ...
- 编写跨浏览器兼容的 CSS 代码的金科玉律
作为 Web 设计师,你的网站在各种浏览器中有完全一样的表现是很多人的目标,然而这是一个永远无法真正实现的目标,很多人认为,完美的跨浏览器兼容并不必要,这样说虽然没错,但在很多情形,一种近似的兼容还是 ...
最新文章
- 在python中调用js或者nodejs要使用PyExecJs第三方包。
- buffer和cache怎么让你们解释的那么难理解?
- 实现拖拽上传文件的一款小控件——dropzone
- Linux Kernel TCP/IP Stack|Linux网络硬核系列 | 图
- 图像算法七:【形态学图像处理】二值运算、膨胀、腐蚀
- Visual Studio 2008 每日提示(六)
- android中的imagebutton,Android:以编程方式在ImageButton中设置图像的填充
- jQ+jQ UI制作的一个简单的二级可多选穿梭框
- 交换机配置软件crt安装_模拟器安装使用
- spyder pyecharts不显示_飞利浦292E2E评测丨宽屏显示器中的多面手
- Unity LOGO流光效果
- 解决word或wps删除空白页后页面布局变乱
- Portraiture 3.5.6磨皮滤镜插件适用于Photoshop磨皮美化功能
- 第五章第五题(千克与磅之间的互换)(Conversion from kilogram to pound and pound to kilogram)
- 如何创建一个JS文件以及调用JS文件
- JS学习之路系列总结三才阵(此文犹如武林之中的易筋经,是你驰骋IT界的武功心法,学会JS五大阵法就学会了JS,博主建议先学三才阵)
- android studio增加一个界面,Android Studio在同一个窗口中打开多个Project【附效果图附源码...
- PB 水凝胶基普鲁士蓝纳米复合物|碳纳米管-离子液体/聚苯胺-普鲁士蓝-普鲁士蓝氧化酶复合物|碳纳米管/普鲁士蓝(MWCNTs/PB)纳米复合物
- BSCI验厂考勤资料工资作假不一致解决方案
- 国际足联正式裁决莫德斯特闹剧 此事或还有反转?