常情况下select内的文字默认值是左对齐,下面主要用css的属性实现select里面的文字右对齐;
效果如下:
实现该效果是,在select样式里添加direction: rtl;属性即可;
direction定义和用法
direction属性规定文本的方向 / 书写方向。
该属性指定了块的基本书写方向,以及针对 Unicode 双向算法的嵌入和覆盖方向。不支持双向文本的用户代理可以忽略这个属性。
天我们来聊一聊CSS文本两端对齐。
事情的起因是这样的,在Review一位同事做的页面时,发现好几处字符之间写了很多空格,于是问他为什么这么做,他说设计要求这几个文本的呈现宽度必须一致,但它们的字符个数又不同,所以就在字符数少的文本中添加空格从而达到文本两端对齐(字符均匀分布)的效果,于是我对他表示了侮辱性的赞美。
用添加空格符的方式实现文本两端对齐,除了不够优雅,容易被羞辱之外,还有其他三个问题:
1. 不同的浏览器,不同的移动设备,对空格符的展示宽度是有细微差别的,一个空格看不出影响,但是多个空格就无法保证一致了,很有可能出现没对齐或者折行的情况。
2. 任何页面都避免不了修改,如果文本需要更换,并且更换后字数发生变化,这将意味着之前的空格数量需要重新调整,非常不利于维护。
3. 某些页面上的文本,用户可能会去复制,但复制下来后发现含有很多空格符,仍需要二次编辑。
因此在日常开发中要避免使用空格符来实现两端对齐,而应该使用标准的CSS文本对齐属性来解决。
这个属性大家经常用到的值有三个:
left:左对齐
right:右对齐
center:居中对齐
它还有一个属性值:justify,表示文本两端对齐,也就是让文本在固定宽度内平均分布,使两边不会出现空白。那么用这个属性是否就能很好的实现文本两端对齐呢?
通过测试发现,单行文本通过text-align:justify; 并不能实现两端对齐,为什么会出现这个情况?我们需要先了解一点点排版知识。
传统书刊的排版印刷对于整个自然段通常采用两端对齐的方式,这样就保证了排版的美观和良好的阅读体验。但是自然段的最后一行文字是左对齐的,因为最后一行文本意味着段落的结束,没有必要继续两端对齐了。
细心的朋友应该已经猜到了,在我们测试中,文本只有一行,意味着它也是最后一行,而CSS的文本对齐方式也遵循最后一行文本默认左对齐的原则,因此不能实现两端对齐。
好在CSS为我们提供了另外一个属性:text-align-last,这个属性用来额外设置段落最后一行文本的对齐方式,因此对于单行文本,我们只需要设置:text-align-last: justify;就可以了,亲测有效。
TIPS:单行文本要想实现文本两端对齐,除了上面说的方式,一定别忘了这个文本需要一个确定的宽度,不设置宽度,文本也就不存在两端。因此这个单行文本不能是行内布局,而应该是块级或者是行内块级布局。
好景不长,用上面的方式实现了文本两端对齐后,发现它只是在PC上有效,但是在IOS的系统浏览器里毫无效果,最后发现在IOS上不支持text-align-last这个属性,因此这个方式并不稳妥。
那么如何解决IOS的兼容问题呢?
着手点只有一个,那就是如何保证单行文本对于CSS来说并不是最后一行?这句话看似很奇怪,其实解决办法很简单,只需要给这个单行文本添加一个伪元素after即可。
someClass: after { content: “”}
由于添加了伪元素,单行文本不再是最后一行,伪元素才是, 同时伪元素的内容为空字符串,并不会对显示造成影响,因此完美解决了这个问题。
注意:伪元素after不仅要设置content,还要添加 width:100%; 和 display:inline-block; 这是因为:如果不设置宽度,伪元素内容并不会成为第二行,如果display设置成block,又造成了伪元素变成了另一个块级元素,所以要设置为inline-block。
最终的代码:
someClass {text-align:justify; width:300px;}
someClass: after { content: “”; width:100%; display:inline-block;}
技术等级】初级
【承接文章】《CSS文本属性,让你的段落更加美观,前端之路更进一步》
本文重点讲解CSS技术中文本样式的text-align属性以及”块级元素”和“内联元素”的使用。本文属于前端开发的初级教程,适合于刚刚开始接触CSS技术的学习者。
一、设置对齐方式:
CSS技术利用text-align属性来设置对齐方式
首先,在使用该属性的同时,要明确这是谁相对于谁的对齐方式。让我们一起来看下列代码。
<div>
<p style=”text-align:center”></p>
</div>
上述代码中使用了text-align属性的标记对是<p></p>标记对。那么,是谁相对于谁垂直居中了呢?下面列举了两种可能的情况:
<p>标记对相对于它的容器<div>标记对垂直居中
<p>标记对的内容(即“”文字)相对于<p>标记对本身垂直居中。
请大家仔细想一想,应该是上述那种情况?
正确答案是第二种。也就是说:使用了text-align属性的标记对,是这个标记对的内容在该标记对内部实现了对齐效果,而不是这个标记对在其容器内部实现了对齐效果。
其次,要想实现文本相对于自身的对齐方式,那么自身的标记对必须具备一定的宽度和高度。以上述代码来说,<p>标记对默认情况下的宽度为整个页面的宽度,也就是说这个标记对自身是有一定的宽度的,同时内部的文本数量又比较少,所以text-align在使用的过程中是可以看到效果的。
综合上述的内容,可以说text-align属性在使用时要注意以下两点:
对齐效果是自身内部的文本内容相对于自身这个容器的对齐方式。
标记对自身必须具备一定的宽度。
text-align属性可以有多种取值:
left,左对齐。内部文本在自身容器中左对齐
center,居中对齐。内部文本在自身容器中居中对齐。
right,右对齐。内部文本在自身容器中右对齐。
justify,两端对齐。内部文本在自身容器中两端对齐,即整个段落的左侧是整齐的,右侧也是整齐的。这种对齐方式和左对齐是有区别的。左对齐可以明显的观察出段落的右侧是不整齐的。
左对齐和两端对齐的区别
从上图中可以看出,两端的最右侧,也就是深色直线比对的位置。采用的左对齐的段落这条线附近的段落文本是没有对齐的;而采用了两端对齐的这条线附近的段落文本是对齐的。
二、块级元素与内联元素
我们将HTML的各个标记,根据在页面中展示内容的外观,分为两类:一类叫做“块级元素”,另一类叫做“内联元素”。
典型的“块级元素”是<div></div>标记对。
典型的“内联元素”是<span></span>标记对。
这两个标记对本身没有任何外观效果,内部可以盛放任何HTML标记对,是网页布局时常用的两个容器。 默认情况下,<div></div>标记的宽度为页面的整宽,即一个<div></div>标记占一行,被称为“块级元素”。<span></span>标记的宽度为内部内容的宽度,多个<span></span>标记的内容可以在一行内显示,被称为“行内元素”或“内联元素”。
常用的块级元素标记还包括:<p></p> <ul></ul> <ol></ol> <li></li> <table></table> <form></form>
常用的内联元素标记还包括:<a></a> <img /> <input /> <select></select> <textarea></textarea>
三、块级元素与内联元素的区别:
块级元素和内联元素的的区别可以从下图中看到。
“块级元素”和“内联元素”的区别
四、学习两个新的CSS属性
我们这里学习两个简单的CSS属性,分别为width和height属性。
width,为块级元素设置宽度。
height,为块级元素设置高度。
这两个属性的取值必须是带有单位的数值。
例:div{width:200px; height:30px;}
上述代码将页面中所有的<div></div>标记对都设置为了宽度200像素、高度30像素的矩形。也就是说这样一来,<div></div>标记对再也不占有整个页面的整宽了,但是仍然为独占一行的情况。
这两个属性是用来设置元素的宽度和高度的,但是只能适用于块级元素。这也是内联元素没有宽度的一个重要原因:因为利用width属性为内联元素设置宽度是没有效果的。
下一篇文章中,小海老师会为大家从细节上深入剖析line-height属性以及该属性的用法。对于渴望在前端开发道路上前进的你一定不能错过!
如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容,可以私信我,我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你,帮助你在前端开发的道路上阔步前行。
在头条上也已经写了有十篇文章了。这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章,逐步学到一定的知识,甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验,每写一篇时我都尽量把握好措辞,用简单易懂的语言描述,同时精心设计版面,让版面更加丰富,激发阅读兴趣。所以,每一篇文章可能篇幅不长,但是都要耗费小海老师很久的时间。
希望收藏了我写的文章的你同时可以关注一下“小海前端”,因为这些文章都是连载的,并且是经过我系统的归纳过的。关注“小海前端”,我会继续为大家奉上更加深入的前端开发文章,也希望更多的初学者跟着学下去,我们共同将前端开发的路努力坚持的走下去。
*请认真填写需求信息,我们会在24小时内与您取得联系。