I am searching for a solution for text overflow inside a html.
in my project I am using angularjs, so basicly I tried to make a directive without any success.
for example lets say i have the following html tag:
<div style="height=10px;witdh=5px"> text text
sLorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis quis iaculis tellus, et feugiat orci. Interdum et malesuada
fames ac ante ipsum primis in faucibus. Vestibulum id condimentum neque. Vivamus nec
bibendum tortor. Donec mi sapien, rutrum sit amet sagittis eu, consectetur non lectus.
Cras vitae porttitor assa. Phasellus odio mauris, placerat in luctus nec, malesuada et
mauris. Donec neque dui, gravida sit amet iaculis vitae, ultrices a enim. Sed mi mauris,
pharetra eget facilisis id, vestibulum laoreet quam. Etiam interdum nisi non massa
pellentesque
</div>
i am looking to get some text from the innerHTML text and then 3 point such as ... if there is a height overflow
Here's a quick snippet I just wrote up.
JSFiddle
This allows for multi-line ellipsis checking by using the width and height of the box and continuing to remove characters until the contents fit inside the box.
$(function(){
$(".overflow-box").each(function(){
$("body").append("<div class='overflow-hidden'/>");
$(".overflow-hidden").css("width", $(this).width()+"px");
var i = $(this).html().length;
while($(".overflow-hidden").html($(this).html().substring(0, i--)+"...").height() > $(this).height())
{}
$(this).html($(".overflow-hidden").html());
$(".overflow-hidden").remove();
});
});
To accomplish this for your <div> above you'll need the following:
height: 10px;
width: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
On a slightly different note, your inline CSS is incorrect. CSS property-value pairs are separated by a colon like so:
<div style="height: 10px, width: 5px, white-space: nowrap, overflow: hidden, text-overflow: ellipsis;">
Related
Is it posible to make text left aligned on a slanted line? it's alignement should follow the slanted slanted image with required support for IE9+?
My example code :
img {
display: block;
float: left;
transform: rotate(-5deg);
margin: 0 15px;
}
<div>
<img src="http://placehold.it/150x250&text=img" alt="image" />
<p>Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu,luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, paragraph.</p>
</div>
Using LESS
You guys made me think a bit more outside of the box, so I came out with my own ugly solution.
My idea is to add a bunch of extra square elements and calculate its size:
.loop(#i) when (#i > 0){
.loop((#i - 1));
.space#{i}{
width: floor(#i*#hSize/(1/tan(5deg)));
}
}
#hSize: 15px;
.space {
float: left;
clear: left;
width: #hSize;
height: #hSize;
}
HTML:
<p>
<span class="space space1"></span>
<span class="space space2"></span>
<!-- (...) -->
<span class="space space11"></span>
Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, paragraph.
</p>
Proof of concept: http://codepen.io/Tymek/pen/jEypOX?editors=110
#chipChocolate.py, it was just a matter of principle for me NOT to use JavaScript for this. If anyone wants to write JS/jQuery code based on my solution, you're welcome. Please share it here afterwards.
WARNING: The shape-outside property should not be used in live projects1. This answer is here just to show how the desired output can
be achieved with this property.
Here is an example using the shape-outside property (modern webkit browsers only) :
DEMO
img {
display: block;
float: left;
transform: rotate(-5deg);
margin: 0 20px;
-webkit-shape-outside: polygon(0 3%, 85% -3%, 100% 97%, 15% 103%);
shape-outside: polygon(0 3%, 85% -3%, 100% 97%, 15% 103%);
}
<div>
<img src="http://placehold.it/150x250&text=img" alt="image" />
<p>Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu,
luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in,
paragraph.</p>
</div>
1The CSS Shapes Module Level 1 actually (mai 2016) has the status of "Candidate Recommendation". As this means it is a work in progress, it may change at any moment and therefore should not be used other than for testing.
The same layout could be achieved with the shape-inside property and specify a containing box for the text but no browser I know of supports this property today.
For a cross browser approach please see Tymek's answer.
img {
display: block;
float: left;
transform: rotate(-5deg);
margin: 0 15px;
}
p {
transform: skew(6deg);
font-style: italic;
}
<div>
<img src="http://placehold.it/150x250&text=img" alt="image" />
<p>Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu,
luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in,
paragraph.</p>
</div>
I can't give you a code example, this is more complicated than a skew transform.
You must parse the text and the related DOM contained in it and look for each new lines of text (not br or \n but each first character of every rendered line).
With this information you can add a padding-left calculated from the images position and dimension.
OK, so I have a little footer at the bottom of the page that, when clicked, toggles to show/hide a content box. Basically, the code looks like this:
css:
body {
background:black;}
footer {
position:fixed;
bottom:0;
right:2em;
width:25%;
background:white;
text-align:center;}
#foot_content {
display:none;
overflow-y:auto;}
#foot_content p {
margin:1em auto 0;
max-width:75%;}
javascript:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#foot").click(function () {
$("#foot_content").slideToggle("1ms");
});
});
</script>
html:
<body>
<footer class="bar" id="foot">
<div id="foot_content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet cursus sapien sit amet rutrum. Suspendisse semper eros sit amet sem semper, vitae finibus sem porta. Nullam facilisis est vestibulum efficitur molestie. Nam euismod, est a feugiat placerat, nibh diam faucibus ipsum, nec scelerisque velit nisl quis nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas eget justo ligula. Aenean sodales nunc at sem venenatis, id pharetra diam vehicula. Nullam mollis massa quis libero tincidunt ultrices. Integer odio lorem, rhoncus id pretium eget, suscipit et ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet cursus sapien sit amet rutrum. Suspendisse semper eros sit amet sem semper, vitae finibus sem porta. Nullam facilisis est vestibulum efficitur molestie. Nam euismod, est a feugiat placerat, nibh diam faucibus ipsum, nec scelerisque velit nisl quis nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas eget justo ligula. Aenean sodales nunc at sem venenatis, id pharetra diam vehicula. Nullam mollis massa quis libero tincidunt ultrices. Integer odio lorem, rhoncus id pretium eget, suscipit et ante.</p>
</div>
<div class="title">Title</div>
</footer>
</body>
I want it so that the content's top edge, when up, is at or below about the halfway point of the window, and the overflowing text can be scrolled.
I tried setting the max-height of #foot_content to 50%. Filled the entire page. I also tried that with various values for position. Either I got the same result (relative), or it didn't toggle right (fixed and absolute). How can I do this?
You can try setting #foot_content {height:50vh;} Edit: Check here for browser support of Viewport Units.
Or
html, body {
height: 100%; /* for % based height to work you need to declare height on the parent */
margin: 0;
padding: 0;
}
#foot_content {
height:50%;
}
You could do this with jQuery (since you're already using it) by adding this line after document ready:
$("#foot_content").height($(window).height() / 2);
So your JavaScript will now look like this:
$(document).ready(function(){
$("#foot_content").height($(window).height() / 2);
$("#foot").click(function () {
$("#foot_content").slideToggle("1ms");
});
});
This sets the div's height to be half that of the window's.
I just did a fiddle and it looks like its working: https://jsfiddle.net/odv0mj33/
I just changed the footer to have max-height and it worked correctly.
footer {
position:fixed;
bottom:0;
right:2em;
width:25%;
background:white;
text-align:center;
max-height:50%;
}
With the way its set up now you'll have to use max-height on the footer to get the desired outcome without using jQuery, I believe. Add a max height to the footer and it'll scroll.
#foot_content {
display:none;
overflow-y:auto;
max-height:200px;
}
With html2canvas the screenshot start always at the top left of the body.
But I need to capture only a part of the body.
Could it be possible to introduce a variable to define a "left and top" to make just a small screenshot of the middle of the body?
I do not know much about the programming... and I'm completely lost!
Thanks for your help.
You should pass the identity of a screen element (e.g. #container) to the html2canvas function. For example:
$('#goButton').click(function() {
html2canvas($('#container'), {
onrendered: function(canvas) {
myImage = canvas.toDataURL("image/png");
$('#image').append(canvas);
}
});
});
#container {
width: 300px;
height: 200px;
border: 2px solid #888888;
overflow: scroll;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<div id="container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et ex neque. Vivamus vulputate libero magna, quis porttitor libero faucibus eu. Aenean pharetra eleifend leo nec varius. In facilisis enim quis tellus egestas, ut euismod orci eleifend. Vestibulum
eget enim dapibus, sollicitudin ante a, bibendum purus. Fusce nec condimentum sapien. Aliquam lacus mauris, iaculis iaculis elit vel, tincidunt dapibus neque.</div>
<br>
<button id="goButton">Snap</button>
<br>
<br>
<div id="image"></div>
Just position the element wherever you want it. You should note that html2canvas doesn't actually do a screen shot - it actually renders the element (and all child elements and CSS), so you can't just specify an area of the screen.
I'm using jquery cycle to fade between a few slides. These slides are of a fixed height but they contain p tags that contain text of varying lengths. I've created this jsfiddle to show you what I mean.
The problem I'm having is that I want the p tags within these slides to be vertically aligned - I want the copy to sit nicely in the center of the div. Usually when working with dynamic content like this, I'd put the p tags in a wrapper, then calculate the height of the wrapper on page load using js and position accordingly (which is why I've tagged this as javascript - I may need to use it for the solution if I can't use css).
Anyway the reason I can't seem to use js is because the p tags are within hidden panels. I can only access the size of the elements once the parent becomes visible which means I'd no doubt have to set up a callback just after a slide is made visible to do the positioning then. The downside of that is the content will jump while the js calculates the position.
One solution would be to use a table with vertical-align in the table cell, but I'm not sure it'd be semantically correct to put p tags within a td? (someone correct me if I'm wrong). Is there a purely css solution I can use here, that'll also work in ie7?
Here is the html I have:
<script src="http://ajax.aspnetcdn.com/ajax/jquery.cycle/2.99/jquery.cycle.all.js"></script>
<div id="cycle-wrapper">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra. Praesent iaculis sem vitae arcu dictum, quis dictum arcu cursus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra. Praesent iaculis sem vitae arcu dictum, quis dictum arcu cursus.</p>
</div>
</div>
The css:
#cycle-wrapper { width: 340px; height: 300px; border: 2px solid red; }
#cycle-wrapper div { width: 340px; height: 300px; text-align: center; }
The script:
$(function() {
$('#cycle-wrapper').cycle();
});
Thanks
EDIT: I have got it working with tables here but I'd love to find a purely css solution if possible!
You can make your <p> visible only after the alignment has been calculated, so there is no "jumping" paragraph.
If you don't mind use the css display property and add separating elements,
Check my perfect version on http://jsfiddle.net/m29uu/3/
#cycle-wrapper {
width: 340px;
height: 300px;
border: 2px solid red;
display:table;
}
#cycle-wrapper p {
width: 340px;
height: 150px;
display:table-row;
}
#cycle-wrapper span {
text-align: center;
display:table-cell;
vertical-align:middle;
}
PURE CSS WAY
Not sure i understand your req. but i think this achieves what you want, one way of doing it would be to push the upper-most div using margin-top to the middle of parent div, which will automatically push the other div below it!
DEMO : http://jsfiddle.net/logintomyk/YTZYQ/
HTML
<div class="divCent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra. Praesent iaculis sem vitae arcu dictum, quis dictum arcu cursus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra. Praesent iaculis sem
CSS
#cycle-wrapper .divCent { width: 340px; height: 300px; text-align: center;
margin-top:25% /* this is what i added **/
}
EDIT
After comments from Onimusha, here is another fiddle, implemented on his link http://jsfiddle.net/logintomyk/7AJy5/1/
Quick CSS Solution
Add the following css
#cycle-wrapper div > div {
display: table-cell;
vertical-align: middle;
}
and add a second div wrapper around the paragraph tags for the new css to apply to. It worked on the fiddle.
See this link http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
It is possible to vertically center without the jQuery cycle element.
But when the plugin is added the alignment was not proper.
I am not very much aware of this plugin but try changing the default options as mentioned in jQuery Cycle Plugin's option reference.
your Div have id "cycle-wrapper". and all the paragraph within this Div..
use
$("#cycle-wrapper").css("vertical-align:middle");
you can apply any css like the following way
$("element").css("propertyname","value");
Set multiple properties and values:
$(selector).css({property:value, property:value, ...})
How can the scrollbar be hidden? I want to do this because the scrollbar is not nice.
overflow:hidden is not useful, because my div element has many other elements.
So setting overflow does not solve my problem.
You can hide the scrollbar with this...
document.body.style.overflow = 'hidden';
...and unhide it with this:
document.body.style.overflow = 'visible';
However, you have to question yourself whether this is really what you want. Scrollbars appear for people to be able to view things that are outside of their small screens.
You have to overwrite the CSS settings as follows:
<style type="text/css">
#YourSpecialDiv { overflow: hidden !important; }
</style>
And the div you should add the id tag i.e.
<div id="YourSpecialDiv"...>...</div>
I don't think there is actually a way to just hide scrollbars properly.
What overflow:hidden, overflow-x:hidden and overflow-y:hidden do is actually 'if it goes outta 100vw/100vh/100vw an 100vh then do not display it'. Overflow is only do not display what's outside of the current(initial tbh) view.
It hides scrollbar because everything that is in the HTML that should be outside will not be on the page when viewing it (nothing needing scroll so no scrollbar).
The only hide available is (here to hide the Y-axis scrollbar) :
[container]{
overflow:scroll;
overflow-x:hidden;
}
[container]::-webkit-scrollbar{
width:0;
background-color:transparent;
}
Which is a real hide of scrollbar, and sadly works only on webkit-based browsers.
If one day all vendors accept this then it will be amazing and we'll finally be able to hide scrollbars.
You can use the following on any element:
::-webkit-scrollbar {
width: 0px;
}
Source
This only works on webkit browsers, so no IE and Firefox.
You have to use the CSS property overflow, which 'manages' what should happen when the content of a certain element exceeds its boundaries. Setting it to hidden hides the scrollbars.
overflow: hidden;
or
someElement.style.overflow = 'hidden';
The best way to do this would be some sort of pseudo element css selector. But I think only webkit (Chrome/Safari) has one for the scrollbar, so it isn't very cross browser.
A hacky alternative is to wrap it in a div that hides away the scrollbar, by setting the width smaller than the contained div by the scrollbar's size
DEMO (may take a while to get the css perfect, but you get the gist)
The problem here is that scrollbar sizes differ per-browser, so you'll have to make the outer div the largest of the scrollbars' width's smaller. And to not cut off any content in the browsers with the smaller scrollbars, it'd be best to add padding of the biggest size difference for scrollbars.
var container = document.querySelectorAll("div.container")[0];
container.addEventListener("wheel", function(event) {
/*Mouse wheel scrolled down*/
if (event.deltaY > 0)
container.scrollTop += 30;
/*Mouse wheel scrolled up*/
else
container.scrollTop -= 30;
}, false);
div.container {
height: 15rem;
width: 20rem;
overflow: hidden;
padding: 1rem;
border: 1px solid;
font-family: "Seoge UI", "Calibri", sans-serif;
font-size: 1.25rem;
line-height: 1.5rem;
}
<div class="container">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus odio, scelerisque vel sollicitudin sed, ullamcorper sed dolor. Vivamus sed egestas nisl. Ut sollicitudin finibus tortor sit amet posuere. Cras erat massa, auctor non urna quis, interdum sollicitudin sapien. Pellentesque gravida ullamcorper est. Maecenas accumsan lobortis mauris, et auctor urna mattis et. Fusce venenatis, magna blandit faucibus sodales, tortor nunc lacinia ligula, bibendum euismod leo felis placerat velit. Fusce sed arcu vitae metus ultricies tincidunt auctor a diam. Duis at augue efficitur eros rutrum iaculis. Praesent eu maximus orci. Praesent lobortis semper elit vitae convallis. Donec consequat lectus tortor, vel aliquam diam fringilla ut. Sed ac tempus justo. Ut bibendum euismod magna, id egestas lacus pulvinar ut. Sed sit amet felis ornare, gravida leo ac, semper dui.</span> Pellentesque efficitur eget nisl tincidunt gravida. Aenean sed nisl commodo, porta lectus in, tincidunt dui. Vivamus eget nunc ipsum. Praesent sed quam odio. Proin aliquam dapibus dictum. Maecenas tristique lorem id erat venenatis, a varius nibh accumsan.
Nulla tempor sagittis odio, nec ultricies sem posuere ornare. Vestibulum sit amet consequat neque. Cras iaculis eleifend nisi. Sed erat mauris, fringilla nec congue quis, lobortis in justo. Quisque sit amet metus id ligula mattis elementum. Morbi sodales,
dui eget fringilla pretium, sem tellus posuere dolor, id pharetra neque elit ac nisl.<br /> Quisque <br />nibh<br />enim,<br />mattis<br />a<br />aliquam<br />eget,<br />luctus<br />id<br />velit.<br />Pellentesque<br />sodales<br />eros<br />eget<br
/>diam<br />gravida<br />porta.<br />Maecenas<br />leo<br />tortor,<br />malesuada<br />quis<br />euismod<br />sed,<br />dictum<br />ut<br />nulla.<br />Vestibulum<br />in<br />massa<br />a<br />quam<br />vehicula<br />placerat<br />in<br />quis<br
/>libero.<br />Maecenas<br />convallis<br />bibendum<br />faucibus.<br />In<br />porttitor<br />quis<br />justo<br />non<br />tincidunt.<br />Pellentesque<br />at<br />justo<br />tincidunt,<br />auctor<br />tortor<br />at,<br />tempus<br />eros. <br
/>Generated: 5 paragraphs, 414 words and 2814 bytes of Lorem Ipsum
</div>