Die Frage ist alt, aber 1 fand es interessant; Mit den Pfeiltasten (nach oben oder unten)
1 ein einfachen Beispiel machen nur einen Teil des Textbereiches des Bildschirms zu zeigen, muss der Benutzer im Text navigieren.
Beispielcode:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
</head>
<body>
<style>
body{
font-size: 40px;
}
#content{
float: left;
}
#full_content{
float: left;
visibility: hidden;
display: none;
}
</style>
<div id="content" >
</div>
<div id="full_content" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce erat purus, sollicitudin quis metus sit amet, ultrices hendrerit arcu. Nulla maximus pharetra tincidunt. Phasellus tincidunt semper sem tempus dapibus. Pellentesque ligula nibh, eleifend ut dictum sed, aliquam et orci. Curabitur tempor augue non turpis elementum imperdiet quis vel tortor. Quisque nec rutrum justo. Praesent scelerisque dignissim nisi. Etiam et gravida mi.
Pellentesque dolor sapien, imperdiet nec convallis non, dictum a arcu. In hac habitasse platea dictumst. Mauris consectetur ultrices nibh nec vestibulum. Etiam maximus, nunc in euismod bibendum, neque ex iaculis nisl, eu finibus velit turpis vitae lacus. Etiam feugiat accumsan viverra. Vivamus turpis libero, molestie at eleifend et, ultrices ut tellus. Donec ipsum tortor, sagittis in aliquet eget, ullamcorper hendrerit erat. Praesent nec mi finibus, malesuada ex et, commodo tortor. Maecenas justo mi, posuere ut laoreet egestas, pretium sit amet est. Curabitur orci tortor, rutrum eu tristique a, ullamcorper vitae augue. Aenean condimentum erat vitae ex semper bibendum. In hac habitasse platea dictumst. Ut ullamcorper quis magna at gravida. Integer eu commodo neque, sit amet ullamcorper nisi. Nullam magna nulla, faucibus a suscipit in, vulputate eu nulla.
Phasellus sit amet bibendum erat. Etiam maximus id lorem vel porttitor. Sed quis nibh feugiat, ultricies neque non, porta turpis. Donec viverra lacinia risus vitae vulputate. Fusce tincidunt luctus sem, tempus lobortis urna cursus a. Suspendisse egestas magna sit amet mattis fermentum. Sed tempor, ligula vel tincidunt efficitur, neque nisi faucibus purus, congue iaculis urna sem tincidunt sapien. Fusce aliquet euismod neque, id aliquam diam posuere id. Praesent aliquet orci id tincidunt pellentesque. Vivamus id metus id erat convallis dapibus. In fermentum nulla ex, vitae pulvinar diam semper eu. Donec sagittis purus eget maximus rhoncus. Curabitur laoreet arcu magna, vel luctus arcu auctor vitae.
Fusce aliquam ex felis, sed fringilla nisi finibus id. Sed porttitor arcu mauris, a semper mi ultrices in. Nam rutrum sem sed sagittis dictum. Donec massa tortor, tempor gravida neque sed, sagittis ultrices augue. Donec fringilla, augue eget semper fermentum, tellus dui rutrum nisi, vel lobortis eros diam at velit. Maecenas tellus dui, aliquet vitae placerat id, sollicitudin eget dui. Duis blandit est ac diam eleifend, vel dictum tortor tempor. Sed eu nulla ut nunc blandit euismod id ac nibh. Morbi massa nisi, aliquam nec ornare in, vulputate sit amet lorem. Duis cursus est quis porta blandit. Pellentesque ultricies convallis convallis. Vivamus tincidunt nisl sed purus lacinia, sagittis placerat magna vestibulum. Aliquam at ornare risus, non tempus justo. Etiam in elit pellentesque, interdum ipsum vitae, facilisis nibh.
Sed eu quam justo. Sed lobortis justo nec quam cursus fringilla. In iaculis, augue vitae bibendum mollis, urna mauris fermentum tortor, in feugiat nunc augue imperdiet ipsum. Quisque arcu enim, blandit sed odio non, feugiat egestas mi. Nunc sodales erat vitae turpis condimentum placerat nec et quam. Ut ipsum lorem, auctor in fermentum eu, commodo quis nisi. Nulla quis tincidunt sem, sit amet malesuada diam. Nam sagittis maximus magna, eget aliquet dui semper pretium. Morbi varius leo non ipsum semper, ac bibendum neque gravida. Phasellus sapien lectus, pretium eget ligula at, elementum tincidunt diam. Nam quis tincidunt tortor. Vivamus a fringilla tellus. Cras elementum ultricies ipsum, non lobortis massa elementum vel.
Phasellus ligula dolor, laoreet in nibh non, dictum vehicula dolor. Donec eu vulputate tellus, at mattis dui. Etiam et diam sed tellus tincidunt malesuada. Praesent congue tristique lectus, sed auctor mauris. Proin nibh mi, gravida id tempus quis, feugiat in tortor. Mauris lobortis diam erat, ut accumsan quam lobortis sed. Sed mollis tellus et eros porttitor consequat. Quisque ultricies lorem a mollis ornare. Vivamus sit amet velit eget neque mattis egestas id sit amet erat. Quisque eleifend libero urna, in dictum lacus vulputate sit amet. Duis pellentesque elementum tortor, ut cursus nunc convallis a. Proin interdum nibh gravida, suscipit metus eget, dignissim nisi.
Praesent dapibus enim sit amet diam viverra lobortis. Nullam nec placerat mauris. Sed velit nibh, dignissim quis rhoncus sed, fermentum non turpis. Quisque congue enim finibus orci venenatis, sed dignissim ligula tempus. Donec finibus id sapien a elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec ultricies sed justo a tincidunt. Nullam vulputate finibus mauris. Praesent tincidunt id nisi eu rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vehicula velit diam, eu pellentesque risus elementum ut.
Donec ut hendrerit purus. Fusce pulvinar sem nec turpis commodo tempus. Nam id maximus velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sodales finibus dictum. Phasellus fermentum placerat condimentum. Phasellus porta sit amet sem bibendum malesuada. In hac habitasse platea dictumst. Nunc sit amet est egestas, luctus lectus eu, eleifend lorem. Duis nec nisi orci. Quisque venenatis blandit neque rutrum porttitor. Nullam eget ultricies risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec felis risus, efficitur eget pellentesque a, tincidunt non lectus. Donec a cursus est.
Fusce commodo ligula non imperdiet congue. Proin vitae pharetra odio. Vestibulum tempor felis vel mi convallis, non aliquet ipsum pharetra. Quisque lectus odio, ultricies vitae porttitor ac, consequat elementum est. Nam blandit mauris ante, nec placerat nunc vulputate id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur semper felis ligula, a posuere nulla viverra a. Aliquam vel massa consectetur, dictum nisi quis, volutpat libero. In suscipit, urna sed varius elementum, tortor nulla consequat enim, ut sodales mauris turpis vitae augue.
Mauris at nulla nibh. Donec nec semper augue, in efficitur quam. Nullam tortor tellus, lobortis ac gravida congue, posuere ac eros. Praesent et dolor sit amet mi fermentum interdum. Aenean ligula nunc, vulputate et maximus nec, scelerisque eu diam. Vivamus pellentesque quis odio vitae cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum luctus porta. Ut fermentum, lacus eu placerat finibus, quam sem pellentesque purus, vel placerat libero elit aliquet eros. Donec a libero vel eros bibendum consequat et et lectus. Etiam congue suscipit finibus. Nam tristique, sapien a pulvinar convallis, enim metus maximus dui, vel laoreet ligula dolor vitae justo. Phasellus blandit odio nulla, sit amet elementum diam volutpat fermentum. Suspendisse non blandit purus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce erat purus, sollicitudin quis metus sit amet, ultrices hendrerit arcu. Nulla maximus pharetra tincidunt. Phasellus tincidunt semper sem tempus dapibus. Pellentesque ligula nibh, eleifend ut dictum sed, aliquam et orci. Curabitur tempor augue non turpis elementum imperdiet quis vel tortor. Quisque nec rutrum justo. Praesent scelerisque dignissim nisi. Etiam et gravida mi.
Pellentesque dolor sapien, imperdiet nec convallis non, dictum a arcu. In hac habitasse platea dictumst. Mauris consectetur ultrices nibh nec vestibulum. Etiam maximus, nunc in euismod bibendum, neque ex iaculis nisl, eu finibus velit turpis vitae lacus. Etiam feugiat accumsan viverra. Vivamus turpis libero, molestie at eleifend et, ultrices ut tellus. Donec ipsum tortor, sagittis in aliquet eget, ullamcorper hendrerit erat. Praesent nec mi finibus, malesuada ex et, commodo tortor. Maecenas justo mi, posuere ut laoreet egestas, pretium sit amet est. Curabitur orci tortor, rutrum eu tristique a, ullamcorper vitae augue. Aenean condimentum erat vitae ex semper bibendum. In hac habitasse platea dictumst. Ut ullamcorper quis magna at gravida. Integer eu commodo neque, sit amet ullamcorper nisi. Nullam magna nulla, faucibus a suscipit in, vulputate eu nulla.
Phasellus sit amet bibendum erat. Etiam maximus id lorem vel porttitor. Sed quis nibh feugiat, ultricies neque non, porta turpis. Donec viverra lacinia risus vitae vulputate. Fusce tincidunt luctus sem, tempus lobortis urna cursus a. Suspendisse egestas magna sit amet mattis fermentum. Sed tempor, ligula vel tincidunt efficitur, neque nisi faucibus purus, congue iaculis urna sem tincidunt sapien. Fusce aliquet euismod neque, id aliquam diam posuere id. Praesent aliquet orci id tincidunt pellentesque. Vivamus id metus id erat convallis dapibus. In fermentum nulla ex, vitae pulvinar diam semper eu. Donec sagittis purus eget maximus rhoncus. Curabitur laoreet arcu magna, vel luctus arcu auctor vitae.
Fusce aliquam ex felis, sed fringilla nisi finibus id. Sed porttitor arcu mauris, a semper mi ultrices in. Nam rutrum sem sed sagittis dictum. Donec massa tortor, tempor gravida neque sed, sagittis ultrices augue. Donec fringilla, augue eget semper fermentum, tellus dui rutrum nisi, vel lobortis eros diam at velit. Maecenas tellus dui, aliquet vitae placerat id, sollicitudin eget dui. Duis blandit est ac diam eleifend, vel dictum tortor tempor. Sed eu nulla ut nunc blandit euismod id ac nibh. Morbi massa nisi, aliquam nec ornare in, vulputate sit amet lorem. Duis cursus est quis porta blandit. Pellentesque ultricies convallis convallis. Vivamus tincidunt nisl sed purus lacinia, sagittis placerat magna vestibulum. Aliquam at ornare risus, non tempus justo. Etiam in elit pellentesque, interdum ipsum vitae, facilisis nibh.
Sed eu quam justo. Sed lobortis justo nec quam cursus fringilla. In iaculis, augue vitae bibendum mollis, urna mauris fermentum tortor, in feugiat nunc augue imperdiet ipsum. Quisque arcu enim, blandit sed odio non, feugiat egestas mi. Nunc sodales erat vitae turpis condimentum placerat nec et quam. Ut ipsum lorem, auctor in fermentum eu, commodo quis nisi. Nulla quis tincidunt sem, sit amet malesuada diam. Nam sagittis maximus magna, eget aliquet dui semper pretium. Morbi varius leo non ipsum semper, ac bibendum neque gravida. Phasellus sapien lectus, pretium eget ligula at, elementum tincidunt diam. Nam quis tincidunt tortor. Vivamus a fringilla tellus. Cras elementum ultricies ipsum, non lobortis massa elementum vel.
Phasellus ligula dolor, laoreet in nibh non, dictum vehicula dolor. Donec eu vulputate tellus, at mattis dui. Etiam et diam sed tellus tincidunt malesuada. Praesent congue tristique lectus, sed auctor mauris. Proin nibh mi, gravida id tempus quis, feugiat in tortor. Mauris lobortis diam erat, ut accumsan quam lobortis sed. Sed mollis tellus et eros porttitor consequat. Quisque ultricies lorem a mollis ornare. Vivamus sit amet velit eget neque mattis egestas id sit amet erat. Quisque eleifend libero urna, in dictum lacus vulputate sit amet. Duis pellentesque elementum tortor, ut cursus nunc convallis a. Proin interdum nibh gravida, suscipit metus eget, dignissim nisi.
Praesent dapibus enim sit amet diam viverra lobortis. Nullam nec placerat mauris. Sed velit nibh, dignissim quis rhoncus sed, fermentum non turpis. Quisque congue enim finibus orci venenatis, sed dignissim ligula tempus. Donec finibus id sapien a elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec ultricies sed justo a tincidunt. Nullam vulputate finibus mauris. Praesent tincidunt id nisi eu rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vehicula velit diam, eu pellentesque risus elementum ut.
Donec ut hendrerit purus. Fusce pulvinar sem nec turpis commodo tempus. Nam id maximus velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sodales finibus dictum. Phasellus fermentum placerat condimentum. Phasellus porta sit amet sem bibendum malesuada. In hac habitasse platea dictumst. Nunc sit amet est egestas, luctus lectus eu, eleifend lorem. Duis nec nisi orci. Quisque venenatis blandit neque rutrum porttitor. Nullam eget ultricies risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec felis risus, efficitur eget pellentesque a, tincidunt non lectus. Donec a cursus est.
Fusce commodo ligula non imperdiet congue. Proin vitae pharetra odio. Vestibulum tempor felis vel mi convallis, non aliquet ipsum pharetra. Quisque lectus odio, ultricies vitae porttitor ac, consequat elementum est. Nam blandit mauris ante, nec placerat nunc vulputate id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur semper felis ligula, a posuere nulla viverra a. Aliquam vel massa consectetur, dictum nisi quis, volutpat libero. In suscipit, urna sed varius elementum, tortor nulla consequat enim, ut sodales mauris turpis vitae augue.
Mauris at nulla nibh. Donec nec semper augue, in efficitur quam. Nullam tortor tellus, lobortis ac gravida congue, posuere ac eros. Praesent et dolor sit amet mi fermentum interdum. Aenean ligula nunc, vulputate et maximus nec, scelerisque eu diam. Vivamus pellentesque quis odio vitae cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum luctus porta. Ut fermentum, lacus eu placerat finibus, quam sem pellentesque purus, vel placerat libero elit aliquet eros. Donec a libero vel eros bibendum consequat et et lectus. Etiam congue suscipit finibus. Nam tristique, sapien a pulvinar convallis, enim metus maximus dui, vel laoreet ligula dolor vitae justo. Phasellus blandit odio nulla, sit amet elementum diam volutpat fermentum. Suspendisse non blandit purus.
</div>
<script>
var index = 0;
function cutText(index) {
if (!index) index = 0;
if(index < 0) index = 0;
//var width = window.screen.width;
var text = document.getElementById("full_content");
var fontSize = getComputedStyle(text).getPropertyValue("font-size").replace("px", "");
var doc = document.documentElement;
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
var strText = text.textContent;
//calculate text length for screen
var charMaxWidth = 10;
var maxChars = (Math.ceil(width/(fontSize/3)) * Math.ceil(height/fontSize))/2;
var startCut = index;
if (index > 0) {
startCut = index * maxChars;
//startCut = index + maxChars;
}
//Check if the next cut not contains an empty string
if(strText.slice(startCut, startCut+maxChars).length == 0){
index--;
startCut = index * maxChars;
}
//only permit if the startCut be less of strTextLength
if(startCut < strText.length){
var content = document.getElementById("content");
content.innerHTML = strText.slice(startCut, startCut+maxChars) + "...";
console.log(startCut,maxChars);
}
}
window.onload = function(){
cutText(0);
}
window.onkeydown = function(e){
//Navigate bt code
if(e.keyCode == 38){
cutText(index--);
}
if(e.keyCode == 40){
cutText(index++);
}
};
</script>
</body>
</html>
Sie das Ergebnis hier sehen können: https://jsfiddle.net/hmr9d35h/