CSS教程：css如何避免隐藏掉半个字

发现用户名称被隐藏掉半个汉字很别扭！！
那么如何避免这种情况呢！
一般中文字体我们都设置了自动换行，也就是说每个汉字都被打散成了独立的元素；当一行汉字的宽度超过容器宽度是就折行显示，那么汉字是如何折行的呢？我们 常会设置一个列表左浮动来横向显示一组数据，当我们不设置li元素宽度，而父容器有不能刚好装下整数的li元素里，ie下就会发生一种现象（这样的现象我 们层遇到过2次，都是没有给容器指定宽度造成的），这就是最后一个不能被完整包容的li元素里的问题会沿着容器右边界按一个字的宽竖向排开，在不设置正确 高度的情况下，这个现象不受overflow：hidden的影响！当我们给li设置宽度的情况下，最后面这个不能被完全包容的li就折到下行显示。
这种情况就恰好说明了浏览器换行的机制，这个机制就是在不设置父层元素宽度的情况下，浏览器会按照最后一个不可分拆的元素的宽度进行折行，在亚洲语系中这 个最后不可分的元素就是一个独立的字体。
写到这里半字之痒的谜底就解开了，那就是不要给汉字设置white-space:nowarp;和white-space:pre; 更不要在使用文字打散属性word-break：break-all；的时候再去使用word-break：keep-all属性。
ps：word-break：keep-all； 使文字与非亚洲语系的文字保持一致！（英文是不会换行的哦！）

时间： 2024-09-18 18:11:13

CSS教程：css如何避免隐藏掉半个字的相关文章

css教程:css+div图文混排

css教程:css图文混排今天我们看看比较高级的css+div进行图文混排吧,我们先来看看下面图的效果图片. 效果还不错吧,我们看看css代码. <dl  class="week1" id="no1">      <dt><a><img src="images/unknow.gif" height="100" width="133"></a><

CSS教程:CSS命名参考

  在XHTML中定义ID.CLASSS都用得上,主要是方面CSS定义样式时能一眼看穿.所以,CSS命名仅作参考. (1)页面结构类 容器: container 页头:header 内容:content/container 页面主体:main 页尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper (2)导航类 导航:nav 主导航:mainnav 子导航:subnav 顶导航:topnav 边导航:sidebar 左导航:lefts

css教程:CSS文件应该保持整洁和统一

  一位网友遇到了一个头疼的问题.需要对经过若干次修改以后的网站进行重整,需要剔除冗余的代码,在CSS样式重整方面,比较头疼,不仅需要对现有的样式进行合并与精简,还需要为网站增加换肤功能. 不难看出,这是一个令人感觉很烦躁的工作,面对一行一行代码头皮发麻.如果我们养成良好的习惯,或许可以让工作更容易一些.就此问题与经验,以下的文字或许有很大的参考价值: 使用链接或者导入样式表的方法对于中阶或高阶的CSS开发人员来说都是再正常不过的事情,但是我在这里依然会强调一下这种方法的重要性.我见过的许多站点

css教程:CSS Padding 教程

该属性的CSS定义填充的空间要素之间的边界和元素含量. 来看几个例子吧.  代码如下 复制代码 <html> <head> <style type="text/css"> td.test1 {padding: 1.5cm} td.test2 {padding: 0.5cm 2.5cm} </style> </head> <body> <table border="1"> <tr

CSS教程:CSS的Background Images背景图片

  背景图片Background Images有许多属性可以操作. 幸运的是,可以使用background处理所有:   上面合并了下面属性:   可以为大部分html元素设置背景图片,不只是整个页面(body),可以用来制作简单但效果显著的美化,比如圆角等等不同的边角形状. 使用背影图片非常简单,而且可以使用在页面的任何地方.许多人喜欢使用色彩鲜艳的图片作为背景的页面,带给用户判读前台文字困难加大.这是一个极端的例子,但事实上,大部分对用户友好.可读性强的文本是白色背景上显示黑色,或是黑色背景

网页制作教程:CSS打印样式技巧

文章简介:针对打印的样式,而不是屏幕显示样式. 不经过任何处理而直接打印网站上的页面会得到一个不理想的效果. 我们WEB开发人员可以简单的采用几个要点来使之达到较为合适的效果: 使用响应式布局设置打印的效果 打印背景图片和颜色,在合适的时候 添加显示的网址或页面链接,以供参考 使用css filter 提高打印的图形效果 针对打印的样式,而不是屏幕显示样式 首先,我们需要使用媒体查询(media query)针对 打印样式设置. @media print {    } 重新针对打印写CSS样式是

CSS教程:用伪元素控制网页表单样式

文章简介:然而,所有这些伪元素都是依赖于特定浏览器引擎的(所以要带有浏览器引擎前缀),这样方便区分特定的浏览器引擎.以下是我自己搜集整理的,在Trident, Gecko, 和 WebKit浏览器引擎下面都可用的伪元素列表.在我写这篇文章的同时,发布了一些webkit的伪元素,所以现在 当开发web应用程序时,表单样式是个头疼的问题.以前,web开发人员不得不接受一个现实,就是由客户端浏览器控制表单样式.然而,作者通过伪元素给web渲染引擎添加钩子,就可以控制表单的显示. 然而,所有这些伪元素都

学习CSS教程:学习CSS网页布局

文章简介:你也许知道什么叫选择器,什么叫属性,什么叫数值,也许你对css布局略懂一二,但这还远远不够.如果你想着从头开始学习HTML和CSS的话,我建议你认真查看下 this tutorial. 否则,在工作的时候,你依然陷入迷惘的泥潭中苦苦挣扎. 这个篇文章介绍的是现在广泛使用于网站布局领域的CSS基础. 你也许知道什么叫选择器,什么叫属性,什么叫数值,也许你对css布局略懂一二,但这还远远不够.如果你想着从头开始学习HTML和CSS的话,我建议你认真查看下 this tutorial. 否则

强烈推荐：非常不错的样式表CSS教程(2)

css|教程|样式表 元素的属性(Attribute)也可以用于selector.下面的列表中例举了几种模式: Attribute Selector Patterns 模式 说明 E[attr] Attribute selector属性选择器.匹配任何含有该属性的E元素,不必考虑它的值的大小 E[attr="value"] Attribute selector,属性选择器.匹配任何具有该属性的元素E,条件是属性的值必须与设定的值相等. E[attr~="value"