不同的文字裝飾在同一個命令按鈕

我需要在同一個commandButton（Primefaces）上放置兩個不同的文字裝飾。我comandButton有下面的代碼：不同的文字裝飾在同一個命令按鈕

<p:commandButton id="nodosUp#{m.id}" 
value="#{estadoDashBoard.numNodosActivos}&#10;UP" 
styleClass="btnEstado #{estadoDashBoard.numNodosActivos eq 0 ? 'btnEstadoNeutro' : 'btnEstadoActivos'}" 
disabled="#{estadoDashBoard.numNodosActivos eq 0 ? 'true' :'false'}" 
style="white-space: pre;"/>

這是結果：

我要換號碼「2」的大小，但保持的「UP」，因爲它的大小現在。

來源

2016-03-17 Brais Sinmais

這是可能的唯一方法是看看您是否可以在commandButton的值中添加/使用html。在StackOverflow中搜索。如果這樣的話，這只是'css'。我懷疑這是可能的。所以BalusC的答案很可能是正確的 – Kukeltje

HTML中不可能，更不用說JSF了，因爲它只是一個HTML代碼生成器。

將它替換爲<p:commandLink>，它生成一個允許更多標記自由的HTML <a>元素，因爲它允許子元素。

E.g.

<p:commandLink ...> 
    <span class="number">2</span> 
    <br /> 
    <span class="text">UP</span> 
</p:commandLink>

來源

2016-03-17 14:28:02 BalusC

任何建議使它看起來像commandLink而不是commandButton？ –

如果我將commandButton替換爲commandLink，它的外觀就不同了。它沒有綠色的正方形（只有綠色的背景文字），對齊的文字是不同的，只有當我點擊鏈接時纔有效。 –

哦，你只是有一個CSS問題。這與JSF無關。爲了解決所描述的問題，使其成爲一個內嵌塊元素。剩下的時候，請向[css]用戶提出一個新問題，同時提供HTML源代碼（因此不提供JSF源代碼）。與此同時，我建議分開學習一些基本的CSS：http://www.htmldog.com/guides/css/beginner/ – BalusC

不同的文字裝飾在同一個命令按鈕

回答

相關問題