目录
如何在点文字时也选中复选框或单选框？
如何让单行文本在容器内垂直居中？
如何使文本溢出边界显示为省略号？
如何设置内联元素的宽高？
效果如下：
代码如下：
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8"/> <title>CSS 技巧</title> <style> </style> </head> <body> <div> <p>方式一：所有主流浏览器都支持：label 的 for 属性值与 input 的 id 属性值一致</p> <input type="checkbox" id="chk1" name="check1"/><label for="chk1">选项一</label> <input type="checkbox" id="chk2" name="check2"/><label for="chk2">选项二</label> <input type="radio" id="rad11" name="rad1"/><label for="rad11">选项一</label> <input type="radio" id="rad12" name="rad1"/><label for="rad12">选项二</label> <hr/> <p>方式二：相比方法1更简洁，但IE6及更早浏览器不支持<br>label 标签直接包含 input标签</p> <label><input type="checkbox" name="check1"/>选项一</label> <label><input type="checkbox" name="check2"/>选项二</label> <label><input type="radio" name="rad2"/>选项一</label> <label><input type="radio" name="rad2"/>选项二</label> </div> </body> </html>只需设置文本的行高等于容器的高度即可，当容器高度为绝对值时有效，如果容器高度为相对值，则无效。
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8"/> <title>CSS 技巧</title> <style> p { width: 250px; height: 40px; background-color: #f0ad4e; color: white; /**行高于容器高度一致*/ line-height: 40px; } </style> </head> <body> <div> <p>万里长城</p> </div> </body> </html>首先需设置将文本强制在一行内显示(white-space:nowrap)，然后将溢出的文本通过 overflow:hidden 截断，并以 text-overflow:ellipsis 方式将截断的文本显示为省略号。
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8"/> <title>CSS 技巧</title> <style> #test { background-color: #f0ad4e; color: white; width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style> </head> <body> <div> <p id="test">万里长城永不倒</p> </div> </body> </html>要使内联元素可以设置宽高，只需将其定义为块级或者内联块级元素即可。所以方法非常多样，既可以设置display属性，也可以设置float属性，或者position属性等等。
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8"/> <title>CSS 技巧</title> <style> div { width: 600px; height: 200px; background-color: #204d74; color: white; } #span1 { background-color: #f0ad4e; /*如果仍然想要 span 保持内联属性，则使用inline-block；如果直接想用块状属性，则使用 block */ display: inline-block; width: 60px; } #span2 { background-color: #46b8da; display: inline-block; width: 60px; } </style> </head> <body> <div> <span id="span1">万里长城永不倒</span> <span id="span2">千里长江水滔滔</span> </div> </body> </html>
