Javascript DAT.GUI：修改文本字段的宽度以放置长文本

我想用DAT.GUI库JavaScript增加文本字段的宽度

从，如果我这样做（使用索引

0

对应于索引

gui。添加
字段，如下所示）：

但我不能在这个字段中设置长文本。这里是一个不带
gui的字段捕获。\uu控制器[0]。doElement.style=“width:100%”：


下面是一个带有
gui的捕获并在此字段中设置长文本：

gui.add(params, 'StartingVector').name('Starting Vector with testing a long text like this : ');


如您所见，我无法在这个修改过的字段中放入长文本（通过
domeElement.style=“width:100%”；
）

如何放大此文本字段以放置长文本

PS：我使用的dat.gui.js可以在下面的链接[dat.gui.js][4]上找到

更新1:

@

我测试了您的解决方案，只将案例合并到一个案例中（用于放置具有相同颜色的长文本，最好是黑色背景上的白色文本）。结果如下：


如您所见，右下角的大小写隐藏了长文本“
一条长线，只是为了好玩”
，最后，只显示“
一条lin
”。我想去掉右边这个灰色的箱子，我不知道怎么做

下面是我在JS脚本中尝试的内容（我采用了您建议的解决方案：“
4
是我脚本中菜单的第四行”）：

使用CSS：

.longtext {
           line-height: 13px !important;
           height: 40px !important;
          }
    
.full_width {
             width: 100% !important;
            }

更新2

我的脚本可在[此链接][6]上找到。我的问题位于第272行和第307行之间，特别是“
StartingVector
”到
params
结构中：

 272 var params = {
 273  GreatCircle : '',
 274  Rotationx : torusRotationInitX,
 275  Rotationz : torusRotationInitZ,
 276  StartingVector : '',
 277  ComponentVectorTheta : componentThetaInit,
 278  ComponentVectorPhi : componentPhiInit,
 279  CurrentVector : '',
 280  ComponentCurrentVectorTheta : componentCurrentThetaInit,
 281  ComponentCurrentVectorPhi : componentCurrentPhiInit,
 282  TotalDiffCovariantDerivative : '',
 283  ComponentCurrentTotalDiffTheta: componentCurrentTotalDiffThetaInit,
 284  ComponentCurrentTotalDiffPhi: componentCurrentTotalDiffPhiInit
 285 };
 286 
 287 // Set parameters for GUI
 288 gui.add(params, 'GreatCircle').name('Great Circle :');
 289 controllerRotationx = gui.add(params, 'Rotationx', 0.01, Math.PI-0.01, 0.001).name('Rotation x ');
 290 controllerRotationz = gui.add(params, 'Rotationz', 0.01, Math.PI-0.01, 0.001).name('Rotation z ');
 291 gui.add(params, 'StartingVector').name('Starting Vector with testing a long text like this : ');
 292 controllerComponentVectorTheta = gui.add(params, 'ComponentVectorTheta', minComponentTheta, maxComponentTheta, 0.01).name('Component θ ');
 293 controllerComponentVectorPhi = gui.add(params, 'ComponentVectorPhi', minComponentPhi, maxComponentPhi, 0.01).name('Component φ ');
 294 gui.add(params, 'CurrentVector').name('Current Vector :');
 295 controllerCurrentComponentVectorTheta = gui.add(params, 'ComponentCurrentVectorTheta', minCurrentComponentTheta,
 296                                         maxCurrentComponentTheta, 0.01).name('Component θ ').listen();
 297 controllerCurrentComponentVectorPhi = gui.add(params, 'ComponentCurrentVectorPhi', minCurrentComponentPhi,
 298                                       maxCurrentComponentPhi, 0.01).name('Component φ ').listen();
 299 gui.add(params, 'TotalDiffCovariantDerivative').name('Total Differential :');
 300 controllerCurrentTotalDiffComponentVectorTheta = gui.add(params, 'ComponentCurrentTotalDiffTheta', minCurrentTotalDiffTheta, maxCurrentTotalDiffTheta,
 301                                                  0.00001).name('Component θ ').listen();
 302 controllerCurrentTotalDiffComponentVectorPhi = gui.add(params, 'ComponentCurrentTotalDiffPhi', minCurrentTotalDiffPhi, maxCurrentTotalDiffPhi,
 303                                                0.00001).name('Component φ ').listen();
 304 
 305 // Adding from StackOverflow from Niket Pathak
 306 gui.__ul.childNodes[4].classList += ' longtext';
 307 gui.__ul.childNodes[4].childNodes[0].childNodes[0].classList += ' full_width';

正如你告诉我的，我曾经：

gui.add(params, 'StartingVector').name('Starting Vector with testing a long text like this : ');

但是短语在“
和
”字处停止，之后什么也没有出现（即“
测试像这样的长文本：
”

我已经把你的CSS：

.longtext {
                 line-height: 13px !important;
                 height: 40px !important;
                }

 .full_width {
          width: 100% !important;
              }

下面是一个说明问题的捕获：


我不想以交互方式放置长文本，我想设置并修复它（就像菜单中的其他短文本字段一样）：我不想让用户修改它

更新3

使用Niket Pathak建议的解决方案，右侧灰色的方框仍然存在，并隐藏了长文本；下面是菜单截图

您可以使用css和JS的简单组合来实现这一点。
为此，我们将

创建一个类，比如说
.longtext
，我们将在其中定义所需的样式
选择正确的
元素，并将上面的css类添加到其中，以覆盖li的现有样式，如下所示：

// var gui = new dat.gui.GUI();
// ...
// here childNodes[4] is the 4th <li> element that has long text.
gui.__ul.childNodes[4].classList += ' longtext';
// here childNodes[6] is the 6th <li> element having firstchild <div> whose firstchild is a <span> to which we add the class 'full_width'. 
gui.__ul.childNodes[6].childNodes[0].childNodes[0].classList += ' full_width';  

.longtext{
线高：13px！重要；
高度：40px！重要；
}
.全宽{
宽度：100%！重要；
}

谢谢您的回答。是否可以将两个水平案例合并为一个案例。例如，在上面的解决方案中，第一行只有“message Hello World”，第四行只有“Starting Vector Dummy Text”（颜色相同） ? regards@youpilat13将两个水平案例合并为一个案例？如果您的意思是将标签显示为一条长线，我已相应地修改了答案。Niket Pathak：我刚刚测试了您的上一个解决方案，在删除行上的右侧灰色案例时遇到了困难，因此无法显示所有长文本。请参阅我的更新1above@youpilat13，请查看JS代码段。它完全按照您的意愿工作。在代码
gui中。u ul.childNodes[4]。childNodes[0]。childNodes[0]。classList+='full\u width'；
应更改为
gui。u ul.childNodes[6]。childNodes[0]。childNodes[0].classList+='full_width'
与代码片段一样。好的，你能看到我上面的更新2吗，我给你更多信息。谢谢，这是因为你已经注释掉了full_width类的重要属性。该页面上的代码是
。full_width{/*width:100%！important；*/width:100%；}
这可以通过查看源代码看到。NIket Pathak：我添加了重要属性，但这并没有改变任何事情，第四行的灰格仍然存在，长文本不会显示（停在“with”字处，并用右侧灰格隐藏）。很抱歉，您的解决方案在Chrome上工作……。但在Firefox（46版）上没有，你知道如何让它在FF上工作吗？thanksNiket Pathak：请你删除上面的评论（这里是我动画的链接），例如：“你应该看到我制作的片段。在你的链接中，你不需要第306行。第307行应该是gui.\u ul.childNodes[3]。childNodes[0]。childNodes[0].classList+='full_width'；因为您使用的是第三个
元素。感谢您的帮助，我将更新我的Firefox，它目前在Chrome和Safari for Mac上运行。您能否删除上述评论中我的动画链接（即您说的“链接对我来说是预期的（在Chrome for Mac上测试过…）“？问候
.longtext {
                 line-height: 13px !important;
                 height: 40px !important;
                }

 .full_width {
          width: 100% !important;
              }

// var gui = new dat.gui.GUI();
// ...
// here childNodes[4] is the 4th <li> element that has long text.
gui.__ul.childNodes[4].classList += ' longtext';
// here childNodes[6] is the 6th <li> element having firstchild <div> whose firstchild is a <span> to which we add the class 'full_width'. 
gui.__ul.childNodes[6].childNodes[0].childNodes[0].classList += ' full_width';