首页 > 其他分享 >CSS:text-align-last文本最后一行的对齐方式

CSS:text-align-last文本最后一行的对齐方式

时间:2023-03-24 14:33:41浏览次数:32  
标签:last text align 一行 对齐 文本

在开发过程中多行文本时出现了其他行左对齐,最后一行右对齐的情况

text-align:规定行内内容如何相对它的块父元素对齐。而且它并不控制块元素自己的对齐,只控制它的行内内容的对齐。要控制文本两端对齐直接写text-align:justify就可以 了,但是对于多行文本,除了最后一行之外都可以实现两端对齐,最后一行依旧左对齐,这是因为text-align不会对文本的最后一行起作用,因此对于单行文本的段落不会实现效果,单行文本既是第一行,也是最后一行。

text-align-last:这个属性规定如何对齐文本的最后一行,但是这只有在text-align为justify的时候才起作用,直接设置text-align-last:justify就可以控制最后一行文本的对齐方式,但是这个方法兼容性相当的差,不建议使用。

1、CSS 属性 text-align-last

CSS 属性 text-align-last 描述的是一段文本中最后一行在被强制换行之前的对齐规则。

/* Keyword values */
text-align-last: auto;
text-align-last: start;
text-align-last: end;
text-align-last: left;
text-align-last: right;
text-align-last: center;
text-align-last: justify;

/* Global values */
text-align-last: inherit;
text-align-last: initial;
text-align-last: unset;

2、属性值

auto:每一行的对齐规则由 text-align 的值来确定,当 text-align 的值是 justify,text-align-last 的表现和设置了 start 的表现是一样的,即如果文本的展示方向是从左到右,则最后一行左侧对齐与内容盒子。

start:与 direction 的设置有关。 如果文本展示方向是从左到右,起点在左侧,则是左对齐; 如果文本展示方向是从右到左,起点在右侧,则是右对齐。 如果没有设置 direction ,则按照浏览器文本的默认显示方向来确定。

end:与 direction 的设置有关。 如果文本展示方向是从左到右,末尾在右侧,则是右对齐; 如果文本展示方向是从右到左,末尾在左侧,则是左对齐。 如果没有设置 direction ,则按照浏览器文本的默认显示方向来确定。

left:最后一行文字与内容盒子的左侧对齐

right:最后一行文字与内容盒子的右侧对齐

center:最后一行文字与内容盒子居中对齐

justify:最后一行文字的开头与内容盒子的左侧对齐,末尾与右侧对齐。

要解决这种问题,可以人工生成两行文本,然后把第二行隐藏,就可以实现两端对齐了

 

标签:last,text,align,一行,对齐,文本
From: https://www.cnblogs.com/czhowe/p/17251465.html

相关文章

  • Centos7下安装Elasticsearch6步骤
    Centos7下安装Elasticsearch6步骤1、安装jdk2、安装Elasticsearch1、新建一个esGroup组和用户(出于安全考虑,Elasticsearch默认是不允许使用root账号运行的)2、更改Elasticsear......
  • Java操作Elasticsearch 之 [Java High Level REST Clientedit]
    <aname="VbjtD"></a>1.简述Elasticsearch是基于Lucene开发的一个分布式全文检索框架,向Elasticsearch中存储和从Elasticsearch中查询,格式是json。向Elasticsearch......
  • sublime text 3 php 语法错误检查
    使用sublimetext3编写php程序的时候,保存代码的时候,直接检查出语法错误,有利于提高效率。1.安装sublimetext3packagemenu:preferences->packagecontrol->installp......
  • CentOS7 安装 Sublime Text3
    在官网下载,下载链接:http://www.sublimetext.com解压:sublime_text_build_4113_x64.tar.xz这是两层压缩,外面是xz压缩方式,里层是tar压缩[root@bogonwwwroot]#xz-dsublime_......
  • 最强分布式搜索引擎——ElasticSearch
    最强分布式搜索引擎——ElasticSearch本篇我们将会介绍到一种特殊的类似数据库存储机制的搜索引擎工具——ESelasticsearch是一款非常强大的开源搜索引擎,具备非常多强大......
  • wx.TextCtrl超链接实现demo
    wx.TextCtrl超链接实现demo;直接看代码,可以直接运行。importwximportwebbrowserclassMyFrame(wx.Frame):def__init__(self):super().__init__(pare......
  • react中的useRef和useContext
    1.useRef和useState类似,都是用来更新数据,但是useRef更新数据是同步的useRef返回一个对象,初始化数据保存在current字段下import{useRef}from'react';constdata=......
  • elasticsearch集群扩展新节点
    原集群配置     原来集群的节点不需要做任何修改和重启服务,新节点符合条件会自动加入集群新节点配置    配置文件的集群名字和nodename配置好即可c......
  • flex布局 align-items和align-content
    1.align-items 对齐项目项目只有单行的时候,对齐项目与容器设置高度或者未设置高度 无关可以使用align-self重新定义某一个项目的值align-items:center  项......
  • CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
    网上查应该是node导致的内存溢出,64位电脑默认1.4G,32位电脑默认0.7G在package.json中的Scripts中添加node的参数 "scripts":{  "serve":"node--max_old_s......