当文本尺寸大于伸缩框宽度时，如何在伸缩框的中间对齐文本中从右上方隐藏溢出？

编程问答 2022-08-11

问题描述

我想使flex-Box的文本垂直和水平居中。如果文本大小超出了伸缩框的宽度，我想从右边隐藏溢出。

<html>
<head>
    <style>
        .center {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 25px;
          border: 3px solid green; 
          white-space: Nowrap;
          overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="center">
        <p>I am vertically and horizontally centered.</p>
    </div>
</body>
</html>

使用此代码，由于居中对齐，因此隐藏了文本左侧和右侧的溢出。 有什么建议可以在文本宽度大于flex-Box宽度时从右边隐藏溢出？ Currently flex-box looks like this我的预期结果是这样。 Overflow from right when text size is more than flex-box size

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

flexboxflexboxhtmloverflowtext-align