我怎樣才能給<g>固定寬度？

Question

我有這樣的圖表與SVG的傳說：

<g class="legend"> 
    <g class="scrollbox"> 
     <g><text>aaa</text></g> 
     <g><text>bbb</text></g> 
     <g><text>ccc</text></g> 
     <g><text>ddd</text></g> 
     <g><text>eee</text></g> 
    </g> 
    </g> 

這將不必要的好，如果每個文本是不是真的很長，但如果文本很長，它讓傳說（G）大。所以我想要傳說（g）有固定的寬度，如果它裏面的文本很長，我希望它被包裹。

我該如何做到這一點？
我知道我無法真正給<g>添加樣式，所以在圖例中添加一些元素來實現這一點？

Answer 1

試試這個：

<style> 
text { 
    white-space: wrap; 
} 
</style> 

Answer 2

您可以添加此CSS規則的<text>加省略號很長的文字。

只需將類truncate添加到您的元素或從下面的規則中刪除類特異性修飾符。

text.truncate { 
    width: /* Your preferred width */; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

或者：

.legend .scrollbox text { /* ... */ }