CSS文字排版

r囧r小猫 2022-06-17 13:37 252阅读 0赞

*时间：2017年4月27日13:35:27*

[《我的博客地图》][Link 1]

对于前端开发人员来说，虽然大部分时间用来处理 页面布局 和 业务逻辑 问题，但对于细小的环节也需要学习和研究。最近发现，文字排版 也是一个值得关注的话题，因为与文字排版相关的CSS属性比较多。

与文字排版相关的属性如下：

letter-spacing：normal | length | inherit；设置字符之间的空白（设置字符间距），如t h i s

text-align：left | right | center | justify | inherit;设置文本的水平对齐方式

text-indent：length | % | inherit;设置文本中首行文本的缩进，汉字一般设置2em

white-space：pre | nowarp | pre-warp | pre-line;指定元素内的空白怎么处理

word-spacing：normal | length | inherit；增加或减少字与字之间的空白，如this   is    a

word-wrap: break-word | normal; 长内容自动换行

和CSS文本相关的其他属性：

color;设置文本颜色

direction;设置文本方向

line-height;设置行高

text-decoration;向文本添加修饰

text-shadow;设置文本阴影

text-transform: none | capitalize |uppercase lowercase | inherit;控制元素中的字母大小写显示，默认 | 每个单词以大写字母开头 | 全部以大写显示 | 全部以小写显示 | 继承父元素属性

unicode-bidi:;设置文本被重写

vertical-align: //设置元素垂直对其方式

baseline //默认元素放置在父元素的基线上

sub //垂直对齐文本的下标

super //垂直对齐文本的上标

top //把元素的顶端与行中最高元素的顶端对齐

text-top //把元素的顶端与父元素字体的顶端对齐

middle //把元素放置在父元素的中部

bottom //把元素的顶端与行中最低的元素的顶端对齐

text-bottom //把元素的底端与父元素字体的底端对齐

length

% //使用 "line-height" 属性的百分比值来排列此元素。允许使用负值

inherit

1、单行文本溢出显示省略号

<div class='text'>这里有很多问题</div>

方案一：css处理

.info\{

font-size: 1.4rem;

line-height: 3.5rem;

width:17.5rem;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

\}

方案二：js处理

array = \[\{name:''\},\{\},\{\}\]

for(var item in array)\{

if(array\[item\].name.length > 13)\{

array\[item\].name = array\[item\].name.substring(0,12) + '...'

\}

\}

[Link 1]: https://blog.csdn.net/wanshaobo888/article/details/79179440

发表评论取消回复

表情：

评论列表（有 0 条评论，252人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS图片文字排版03

实现思路主要技术主要使用CSS属性visibility: hidden;将p标签文字隐藏起来，再通过：hover选择器来改变类card的高度，将p标签文字visibil

女爷i/ 2022年11月29日 11:26/ 0 赞/ 135 阅读

相关 CSS实现图片文字排版02

实现思路使用:hover选择器，当鼠标划入时，transform: scale(1.20);将图片放大1.2倍，再改变文字的外边距，达到动态效果。实现效果 !

Dear 丶/ 2022年11月27日 12:15/ 0 赞/ 189 阅读

相关 CSS图片文字排版01

实现思路通过clip-path属性剪切不同时刻图片大小，开始，给h2，p，a标签影藏并使用transform: translateY()属性，设置不同的偏移量，通过:h

素颜马尾好姑娘i/ 2022年11月27日 12:11/ 0 赞/ 146 阅读

相关文字排版样式

<template> <view class="content"> 律师工作是知识性和智慧性工作。目前人们选择职业时，不仅希望得到较高的收入

怼烎@/ 2022年11月19日 04:14/ 0 赞/ 140 阅读

相关 146.HTML+CSS 完成带有极光文字排版

效果 (源码网盘地址在最后) ![2d17849af5087fa355e2ead84111a46f.png][] 最近开源了一个 Vue 组件，还不够完善，欢迎大家来

超、凢脫俗/ 2022年11月14日 10:07/ 0 赞/ 136 阅读

相关 CSS文字排版

时间：2017年4月27日13:35:27 [《我的博客地图》][Link 1] 对于前端开发人员来说，虽然大部分时间用来处理页面布局和业务逻辑问题，但对于

r囧r小猫/ 2022年06月17日 13:37/ 0 赞/ 253 阅读

相关 textView排版文字对齐

具有特殊字符半角全角字符时排版文字对齐 import android.content.Context; import android.graphics.Can

偏执的太偏执、/ 2022年05月20日 08:23/ 0 赞/ 265 阅读

相关文字段落排版

权值的规则：标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码： p{color:red;} /权值为1/ p span{

àì夳堔傛蜴生んèń/ 2022年05月17日 02:24/ 0 赞/ 218 阅读

相关 Bootstrap文字排版

bootstrap中的文字排版就像word的标题一标题二。。。一样，这样可以拿来区分很多字节，简要的代码如下（注意bootstrap页面中每个都会引入这是基础样式！！

痛定思痛。/ 2021年12月21日 11:07/ 0 赞/ 305 阅读

相关 css文字与排版

文字与排版样式 `font`文字样式

谁践踏了优雅/ 2021年06月26日 16:06/ 0 赞/ 510 阅读