0

Please check the below sample svg code. I have used text-overflow property in text element. But, the property behavior is not working properly. 

<svg width="180" height="120" viewBox="0 0 180 120">
<style>
  text { font: 16px sans-serif; }
  rect { fill: none; stroke: black; vector-effect: non-scaling-stroke; stroke-width: 1; }
</style>

<g>
<rect x="19.5" y="16.5" width="100" height="20"/>
<text x="20" y="2em" width="100">SVG is awesome</text>
</g>

<g transform="translate(0,30)">
<rect x="19.5" y="16.5" width="100" height="20"/>
<text x="20" y="2em" width="100" text-overflow="clip">SVG is awesome</text>
</g>

<g transform="translate(0,60)">
<rect x="19.5" y="16.5" width="100" height="20"/>
<text x="20" y="2em" width="100" text-overflow="ellipsis">SVG is awesome</text>
</g>
</svg>

Is SVG-text element support text-overflow property ? How can i use this property in svg element ?

Thanks.

sprabhakaran
  • 1,615
  • 5
  • 20
  • 36
  • [Might not](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute#T). – Passerby Dec 17 '13 at 07:37
  • possible duplicate of [Add ellipses to overflowing text in SVG?](http://stackoverflow.com/questions/15975440/add-ellipses-to-overflowing-text-in-svg) – Khamidulla Dec 17 '13 at 07:47

1 Answers1

2

text-overflow is not part of the current SVG 1.1. standard.

A new SVG 2 specification is in progress and text-overflow is scheduled to be included in that. UAs are beginning to implement SVG 2 but only Opera 12 has implemented text overflow thus far.

In the meantime you could perhaps include the text as html via foreignObject as html text does support text-overflow.

Robert Longson
  • 118,664
  • 26
  • 252
  • 242
  • foreignObject is not supporter in any version of ie sadly, so I would not recommend it. http://msdn.microsoft.com/en-us/library/hh834675%28v=vs.85%29.aspx – borisrorsvort Jun 25 '14 at 16:40
  • @borisrorsvort OK, so what is **your** answer? – Robert Longson Jun 26 '14 at 08:15
  • I don't know yet, i'm also searching. I was just indicating the compatiblity issue about text-overflow. I had some hope that the last solution of OpherV on https://stackoverflow.com/questions/9241315/trimming-text-to-a-given-pixel-width-in-svg would work. But I haven't managed to make it work yet. – borisrorsvort Jun 26 '14 at 12:11