css中如何使一段文字居中的同时超出换行的部分不居中

于 2022-08-25 11:58:00 发布
阅读量662 收藏
点赞数
分类专栏： 前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_64180379/article/details/126520285
版权

先看图

红框的部分是已经实现的步骤

.elastic-title {
        padding: 40rpx 0;
        text-align: center;
        p {
          width: 384rpx;
          margin: 0 auto;
          display: inline-block; // 
          text-align: left;
          padding: 80rpx 0 120rpx 0;
        }
      }

解读：父级设置 text-align: center;

子级设置: display: inline-block text-align: left

豆本豆、
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div+CSS设置一行内文字超过宽度不换行且不显示截断文字加…
12-13
当一行文字超过DIV或者Table的宽度的时候，浏览器中默认是让它换行显示的，如果我们不想让他换行显示那要怎么办呢？看到这个标题很容易就会想到截断文字加“…”的做法。 一般的文字截断(适用于内联与块)： ==============CSS================ 复制代码代码如下: .text-overflow{ display:block;/*内联对象需加*/ width:31em; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ t
css设置文字上下居中，一行文字居中，两行或多行文字同样居中
weixin_42371145的博客
02-18 776
<div class="fl border">{{credInfo}}</div> .border{ min-width: 80px; max-width: 148px; overflow: hidden; 下面这一部分是起作用部分 height: 39px; line-height: 19.5px; display...
icss学习之单行居中，多行居左，超过省略
weixin_46727994的博客
11-18 396
<div class="container"> <h2><p>我是单行标题<em>居中</em></p></h2> <h2><p>我是两行标题两行标题两行标题居左</p></h2> <h2><p>我是<em>超过两行的标题最后点号省略我是超过两行的标题最后点号省略我是超过两行的标题最后点号省略省
css实现一行居中显示，两行靠左显示，超过两行以引号省略
anda9128的博客
04-06 324
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin:0;padding:0;font-family:...
CSS：实现多行文本垂直居中的四种方法
KongKong_Rac的博客
10-15 1万+
对于单行文本，可以使用行高等于高度来设置垂直居中，但多行文本不适用。 实现多行文本垂直居中的四种方法 1. 利用表格元素table+vertical-align实现 将父元素设置为块级表格来显示，再将子元素设置为一个表格单元格显示后，设置vertical-align: middle;即实现效果。 <body> <div class="text"> <span>扩展： Vue.js 是一套构建用户界面的渐进式框架。 它与其他重量级框架不同的是，Vue
css 让文本 单行居中，多行居左
rgpbrave的博客
01-05 239
//父元素设置 text-align:center; //子元素 p标签 text-align :left ; display:inline-block; // 文本不够一行的时候，父元素属性使p标签居中显示。p元素内部文本撑开宽度。多行时，p标签宽度顶满父元素宽度，内部文本居左 ...
div内容超出处理
wo_buzhidao的博客
07-21 9210
div内容超出css处理几种方式（用到后不断补充） 1.文本内容超时使用省略号显示超出的部分 width: 170px; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden;
css如何让文字不换行,css如何让文字不换行显示？
热门推荐
weixin_33957089的博客
08-04 2万+
在CSS中，可以通过white-space属性来实现文字不换行显示；只要将white-space属性的值为nowrap就可强制文字不换行。white-space属性指定元素内的空白怎样处理。它有以下属性值：normal：默认。空白会被浏览器忽略。pre：空白会被浏览器保留。其行为方式类似 HTML 中的 标签。nowrap：文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。pre-wr...
HTML+CSS中因文字换行而引发问题的处理方法
大头之家
07-19 7120
1.当我们需要让一段内容的行内垂直居中，如果文字比较短，直接设置 heigth=x 然后将 line-height设置成相同的x即可。 但是一旦文字过长而变成多行，该方法就不适用了而且会造成样式错乱（背景色只有第一行文字有，第二行文字完全跳出区域样式外等问题） 给p标签或文字所在标签设置： display: table-cell; vertical-align: middle; 如果设置...
CSS文字超出宽度---换行总结---附代码
tangdou369098655的博客
05-05 3346
2021-5-5重新总结----附代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> ....
CSS实现同一行的图片和文字垂直居中对齐的方法
12-13
有些朋友会发现，如果一行内容中有图片有文字的话，文字往往会自动的底部对齐，影响美观，那如何让它们相对于垂直居中呢，很简单，就是在图片和文字所在的行中添加CSS属性：vertical-align:middle;这样，它们在同一...
div+CSS设置一行内文字超过宽度不换行且不显示截断文字加...
09-25
当一行文字超过DIV或者Table的宽度的时候，浏览器中默认是让它换行显示的，如果我们不想让他换行显示那要怎么办呢，下面为大家介绍下如何设置div+CSS设置一行内文字超过宽度不换行且不显示
CSS解决文字与图片不能水平居中对齐的问题
09-25
在文字旁边加上一个图标，通过css如何解决文字与图片不能水平居中对齐的问题，下面有个示例，大家可以参考下
CSS自动换行、强制不换行、强制断行、超出显示省略号
09-27
主要介绍了CSS自动换行、强制不换行、强制断行、超出显示省略号的相关资料,需要的朋友可以参考下
【CSS世界】通过CSS，实现文字一行居中，多行左对齐效果
dumplings_bin的博客
01-11 605
效果 代码 HTML： <div class="box"> <p id="conMore" class="content">文字内容-新增文字-新增文字-新增文字</p> </div> <!-- 按钮 --> <p><button id="btnMore">更多文字</button></p> CSS： .box { padding: 10px; background-color: #
[css] 实现文字一行居中，多行左对齐效果
weixin_36210698的博客
04-09 7784
实现文字一行居中，多行左对齐效果 其实这种需求还是蛮常见的，主要用于产品列表页面，用于产品图片下面，显示产品的名称。 想要实现的效果为： 未知文字长度，当文字长度小于盒子宽度，也就是一行时，文字居中。 当文字长度大于盒子的宽度，会自动换行，成为多行文字，此时文字左对齐 利用行内元素 我首先想到了这个思路，思路如下： p 标签设置为display:inline-block，并让 p 居中，p...
CSS实现文本一行垂直居中，两行垂直居中，超出两行文字显示省略号的方法
MJOY791270505的博客
03-23 1262
实现单行垂直居中，两行垂直居中，超过两行省略…显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> span{ display:-webkit-box; -webkit-line-clamp:2;
css文字换行时对不齐,css小技巧 - 换行对齐
weixin_39616855的博客
08-04 4467
假如需要你实现换行对齐，你可能会想到ul标签和li标签自带这种功能确实在使用li标签自带的项目符号的时候可以直接使用，但是有时可能会有不一致时就需要我们动手写两行代码来实现一下，比如这种效果：项目符号是数字和顿号，如果我们直接复制粘贴这四行文字则会得到如下结果文字换行后是不和项目符号对齐的，因此需要加入底下这两行代码：// (百度百科) em单位名称为相对长度单位。相对于当前对象内文本的字体尺寸。...
CSS实现文字少居中换行居左
张木期的博客
09-13 4743
“用 css 对一行文字进行布局，当文字不够换行的时候，这行文字要居中显示，当文字出现换行的时候，这行文字要靠左显示。” 效果如上，如果直接居中的话会出现这种效果： 实现方式如下： 总结 实现方法： （1）通过行内样式实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style>
css 文字居中换行靠左
最新发布
01-13
CSS文字居中换行靠左可以通过以下代码实现： ```css .text-container { width: 100px; /* 设置容器宽度 */ text-align: center; /* 文字水平居中 */ white-space: normal; /* 允许文字换行 */ word-break: break-all; /* 按单词换行 */ text-align-last: left; /* 文字最后一行靠左对齐 */ } ``` 在上述代码中，我们创建了一个名为`.text-container`的类，将其应用于包含文字的容器元素上。通过设置容器的宽度、文字水平居中、允许文字换行、按单词换行以及最后一行文字靠左对齐，实现了CSS文字居中换行靠左的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值