Truncating svg text to fit a rect - javascript

What i need is to truncate a text so that it fills the size of a svg rectangle and then popup to its full-size on mouse-over.
I have tried with css using the following code to hide the text and then popup but it doesnt seem to work.
#text_trunc {
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#text_trunc:hover{
overflow: visible;
white-space: normal;
width: auto;
position: absolute;
background-color: rgba(0,0,0,0);
}
I have created all the svg elements using javascript and this is where i create an id for the text element
text.setAttributeNS(null, "id", "text_trunc");
My best guess is that svg creates an image which cannot be truncated by css...still need a solution. Thanks in advance

The "overflow" CSS property won't work in SVGs because <text> elements have no "box" to overflow.
You could try experimenting with the "clip-path" property instead. It is a CSS property specific to SVGs. You would need to define a clip path in your SVG that was the size of the truncated box. Then add and remove it with your CSS rules.
#text_trunc {
clip-path: url(#truncbox);
}
#text_trunc:hover{
clip-path: none;
}
Unfortunately, this solution doesn't allow for fancier behaviour like automatic ellipses.

i think the following url will help you
http://css-tricks.com/forums/discussion/12984/css-display-hidden-text-on-rollover/p1

Related

html : detect overflow and change font-size

i search solution to detect overflows in the css-class .entry.title,
and when detect take some css to reduce the font-size.
example: css before detection:
.entry-title {
font-size: 1.42em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
css after detection:
.entry-title {
font-size: calc(1.42em * 0.95);
white-space: inherit;
overflow: inherit;
text-overflow: inherit;
}
I think this could be done with javascript but I have no experience with it.
If the text body of an object of such a class is on a single line, this problem will be easy.
However, it is very difficult to dynamically adjust the font size to eliminate overflow when there are multiple lines of text and complex elements in it.
This is because many style factors affect the overflow of the object, in addition to the font size of the text, and calculating them all is very time-consuming.
To implement response performance related to font size, it is best to use #media{}.
For example:
.entry-title{
font-size: 16px;
}
#media(max-width: 1024px){
.entry-title{
font-size: 14px;
}
}
I think you can use ResizeObserver to detect element is overflow, this is a demo:
https://codesandbox.io/s/infallible-sun-ouotsz?file=/src/styles.css

CSS - Change textline in completely visible with greasemonkey

I want to change this not completely visible CSS textline.
not completely visible textline
CSS AREA
.searchresult-title {
color: #4b4b4b;
line-height: 1.33em;
border-bottom: 1px solid #cccccc;
height: 43px;
overflow: hidden;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
HTML AREA
<div class="searchresult-title"><p>28A.4 Normalverteilung in OpenOffice.org, Wahrscheinlichkeitsdichte, kumulierte Verteilungsfunktion</p></div>
MY CODE
$('.searchresult-title').css({
'overflow': 'auto'
});
I can see in the CSS you have added overflow: hidden; which should be autofirst. I can also see that you have made the same through Javascript. So you can directly do that.
Addition to it, you can set min-height:43px; which will solve your problem.
1. Height: That defines the height of your text content.
2.min-height: That defines the minimum height of your text content. Once it goes beyond the minimum height; height will automatically increase.If you want a specific height also you can set it but with that add in your CSS class overflow:auto; so that it will not go beyond the height but at least text can be visible with a scroll.
If you have already set a height for the parent then it will work accordingly. If you set min-height for child div it won't go beyond parent height.
Also, Have you added text-overflow: ellipsis;also? I can see three dots.

How can I cut long text according to available div area size?

I have a text and preview div area. Whenever I have put long text on the div area, it is overflowed out of div area. I have tried text-wrap:normal, but it does not cut the context and showed only what text fit to the available area.
How can I cut long text according to available div area size? Afterwards, I will put css read more button to end of preview text area.
Use text-overflow: ellipsis;, that when combined with overflow: hidden and one-line technique white-space: nowrap adds a ... at the end of the text, containing it within the parent's width:
div {
overflow: hidden;
width: 100px;
white-space: nowrap;
text-overflow: ellipsis;
float: left;
}
<div>
my very long text is here my very long text is here
</div>
[Continue to read]
You have to add overflov:hidden style for preview container so the text what will be after container won't be shown.
Use overflow: hidden property. The overflow is clipped, and the rest of the content will be invisible:
#preview-div {
overflow: hidden;
}

Howto limit the width of a span?

I wonder if it is possible to give a span a maximum width.
I tried using the following css
display: block;
max-width: 300px;
But the width gets ignored when the text content of the SPAN doesn't fit into the span.
I would like to cut the visible part of the span to the defined max-width.
Is this possible?
Any suggestions?
You'll want to use whitespace: nowrap and overflow: hidden on your span to force it all on one line and truncate the text.
JSFiddle
http://jsfiddle.net/JZYWg/
You have to handle the overflow to avoid expanding.
e.g. Adding:
overflow: hidden; or overflow: auto;
Add overflow:hidden to the css of your span. This will make the text cut off
More info
If I use display: inline-block - the span wraps at 300px or you can use overflow: hidden as suggested by others.
See: http://jsfiddle.net/U6R2A/

If the text doesn't fit on the same row don't display all

I have a left sidebar on my website which contains a list with links. If one link is very long, it won't fit on only one row.
For example: 'This is a very long long long link'.
What can I do to display as much as posible from this text (eg. 'This is a very long') but in such a way that it will fit on only one row (one row has 200px width)?
Set the CSS to:
overflow:hidden;
white-space:nowrap;
There is a CSS3 property called text-overflow that controls just what you describe. In combination with overflow: hidden; and white-space: nowrap; you can customize what is displayed at the end of the line.
There's documentation here that's good and describes the property's flexibility. But let's say all you want to do is add an ellipsis (…) to the end of lines that exceed their width, then all you have to write is :
.sidebar p { /*Or whatever selector matches*/
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Apply overflow: hidden; on the container, along with a set width and height.

Categories