Polymer 1.0：如何阻止 <paper-menu-item>s 换行他们的文本？

Question

代码示例

http://jsbin.com/vudulonaka/1/edit?html,output

Click the menu button on this JSBin。注意文本是如何换行的。我想：

消除文本换行并
使菜单项扩展其宽度以匹配内部文本的宽度。
这可能需要强制菜单从右向左扩展，因为按钮在工具栏中右对齐。

How would I do that? Please provide working JSBin code example.

代码

<!DOCTYPE html>
<html>  
<head>
  <meta charset="utf-8">
  <title>Polymer Bin</title>
  <base href="http://element-party.xyz">
  <link rel="import" href="all-elements.html">
</head>
<body>
<x-element></x-element>
<dom-module id="x-element">
  <template>
    <style>
    </style>
        <paper-header-panel class="flex">
            <paper-toolbar>
                <span class="flex"></span>
                <paper-menu-button>
                    <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
                    <paper-menu class="dropdown-content">
                        <paper-item>This is a long label for the paper menu and button to show</paper-item>
                        <paper-item>This is another long label for the paper menu and button</paper-item>
                        <paper-item>This is still yet another long label for the paper menu</paper-item>
                    </paper-menu>
                </paper-menu-button>
            </paper-toolbar>
            <div class="fit">Content goes here...</div>
        </paper-header-panel>       
  </template>
  <script>
    (function(){
      Polymer({
        is: 'x-element'
      });
    })();
  </script>
</dom-module>
</body>
</html>

Answer 1

这并不完全完美，但它应该让您了解应该更改的 css 属性类型以及如何更改：http://jsbin.com/xaladokimu/1/edit?html,output

改变的是风格：

<style>
  paper-menu-button{
    --paper-menu-button-dropdown:{
      max-width: 100%;
      right:70vw;
    };
  }
  paper-item{
    --paper-item:{
      white-space: nowrap;
      width: 100%;
    };
  }
</style>

基本上，您必须将 white-space: nowrap 添加到项目中，以便它们的文本显示在一行中，然后调整项目的宽度和下拉菜单的水平位置和宽度（尝试将下拉菜单的位置更改为固定的或其他也可能有帮助的东西）

再一次，您应该以某种自定义样式在元素外部设置此 css 属性（除非您希望您的元素仅在设置的位置上工作）

Polymer 1.0：如何阻止 <paper-menu-item>s 换行他们的文本？

Polymer 1.0: How to stop <paper-menu-item>s from wrapping their text?

polymer

polymer-1.0

paper-elements

代码