问题：

在flex框中旋转文本后维护其他样式

伊羽

2023-03-14

我正在工作与表（Ag-grid）。标题的样式是可授予的（可以通过道具改变），即高度/宽度和文本对齐可以改变。由于我不能访问每个页眉单元格中的页眉高度，所以我在页眉单元格中使用flex box来正确地维护文本对齐（垂直/水平）。

现在我得到了一个新的更改请求，要求有一个更多的样式来使文本（HeaderName）垂直，这样用户就可以为宽度不够的标题旋转文本。在这里输入图像描述。为此，我在HeaderCellRenderer中做了更改

我的问题是，如果我旋转文本，我的垂直对齐（顶部/中心/底部）和水平对齐（左/中心/右）不像客户机预期的那样。所有对齐方式都应与文本未旋转时相同。

请协助我这样做。

这是一个柱塞链接，我已经附加只是为了向你展示我的标题单元格是如何（它的虚拟），以及我面临的问题。应用旋转后，文本对齐（上/下/左/右）系统应该与非旋转相同。

// Add your code here
function hori(value) {
  var x = document.getElementsByClassName("outer");
  x[0].style.textAlign = value;
 // alert('changed');

  
}
function vertical(value) {
  var x = document.getElementsByClassName("inner");
  x[0].style.alignSelf = value;
 // alert('changed');

  
}
function rotate() {
  var x = document.getElementsByClassName("inner");
  x[0].style.transform = 'rotate(-90deg)';
}
function rotate() {
  var x = document.getElementsByClassName("inner");
  x[0].style.transform = 'rotate(-90deg)';
}
function Notrotate() {
  var x = document.getElementsByClassName("inner");
  x[0].style.transform = 'none';
}

css lang-css prettyprint-override">/* Add your styles here */
.outer {
    text-align : center;
    display : flex;
    height : 100px;
    width : 200px;
    background-color : yellow;
    color: red;
    overflow : hidden;
    border : 1px solid black;
    
    
}
.inner {
    align-self : center;
    width : 100%;
   
    
    
}

<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
  </head>

  <body>
    
<button onclick="rotate()">rotate</button>
<button onclick="Notrotate()">Not rotate</button>
<button onclick="vertical('flex-start')">v-top</button>
<button onclick="vertical('center')">v-center</button>
<button onclick="vertical('flex-end')">v-end</button>
<button onclick="hori('left')">left</button>
<button onclick="hori('center')">center</button>
<button onclick="hori('right')">right</button>
<hr/>
    <div class="outer">
        <div class="inner">
      text
    </div>
        
        
    </div>
    
  
</body>
</html>

https://plnkr.co/edit/epe0bxvqepvps2zl?预览

共有1个答案

池宸

2023-03-14

您必须定义“Transform-Origin”并删除“width：100%”，然后您必须使用flex属性（justify-content）移动内部容器

// Add your code here
function hori(value) {
  var x = document.getElementsByClassName("outer");
  x[0].style.justifyContent = value;
 // alert('changed');

  
}
function vertical(value) {
  var x = document.getElementsByClassName("inner");
  x[0].style.alignSelf = value;
 // alert('changed');

  
}
function rotate() {
  var x = document.getElementsByClassName("inner");
  x[0].style.transform = 'rotate(-90deg)';
}
function rotate() {
  var x = document.getElementsByClassName("inner");
  x[0].style.transform = 'rotate(-90deg)';
}
function Notrotate() {
  var x = document.getElementsByClassName("inner");
  x[0].style.transform = 'none';
}

    .outer {
        text-align : center;
        display : flex;
        height : 100px;
        width : 200px;
        background-color : yellow;
        color: red;
        border : 1px solid black;
    }
    .inner {
        align-self : center;
        transform-origin: center;
    }

<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
  </head>

  <body>
    
<button onclick="rotate()">rotate</button>
<button onclick="Notrotate()">Not rotate</button>
<button onclick="vertical('flex-start')">v-top</button>
<button onclick="vertical('center')">v-center</button>
<button onclick="vertical('flex-end')">v-end</button>
<button onclick="hori('flex-start')">left</button>
<button onclick="hori('center')">center</button>
<button onclick="hori('flex-end')">right</button>
<hr/>
    <div class="outer">
        <div class="inner">
      text
    </div>
        
        
    </div>
    
  
</body>
</html>

类似资料：

Swarm管理维护指南 - 其他

Worker节点负载均衡通过添加节点来使集群的负载平衡。只要workder节点符合service的要求，service的task会被均匀的分配到不同的节点上。当限制service在指定类型的节点上运行时，例如指定节点CPU的个数或者内存的容量，节点如果没有达到这些指定的要求，task是不会在这样的节点上运行的。监控Swarm健康我们可以通过通过查询Docker API的HTTP端点/node
在python matplotlib中旋转轴文本

我不知道如何在X轴上旋转文本。这是一个时间戳，所以随着样本数量的增加，它们越来越接近，直到它们重叠。我想将文本旋转90度，这样随着样本越来越近，它们就不会重叠。下面是我所拥有的，它工作正常，除了我不知道如何旋转X轴文本。
在Python中旋转二维数组

问题内容：在一个程序中，我正在写一个旋转二维数组的需求。在寻找最佳解决方案时，我发现了这种令人印象深刻的一线功能：我现在在程序中使用它，它按预期工作。我的问题是，我不了解它是如何工作的。如果有人可以解释所涉及的不同功能如何实现所需的结果，我将不胜感激。问题答案：考虑以下二维列表：让我们将其逐步分解：此列表传递给使用参数unpacking，因此调用最终等效于此：希望注释能够清楚说明其
在seaborn FactoryPlot中旋转标签文本

我有一个简单的因子图问题是x标签都在一起运行，使它们无法读取。如何旋转文本以使标签可读？
处理中的旋转文本

我在做点什么，好像卡住了。我试图在处理过程中通过按钮添加文本，但是，一旦我使用translate方法，我的文本就会出现颠倒。我如何简单地旋转它，使其看起来正常？以下是我所拥有的：
选择旋转器项以转到其他页面

我在代码中实现旋转器时遇到了问题。不太清楚它是怎么工作的。但是这里有一个我想做的简单的想法。（例如：点击旋转器，你有两个选项“第2页”和“第3页”。所以，如果你点击“第2页”，它会转到有新内容的第2页。有什么方法可以做到这一点吗？？我也有图像按钮去下一页和返回。只想实现一个旋转框，这样你就可以更快地导航到不同的页面。 } 05-22 01:32:40.058:E/SpannableStringB

在flex框中旋转文本后维护其他样式

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档