QML Text has got a property named elide, which is used to elide some part of a text. Its CSS equivalent is text-overflow. One possible value for elide is Text.ElideMiddle, used to elide the text in the middle. I have searched such a value for text-overflow but I have not found it yet. It is possible to elide at the left and at the right in CSS (with text-overflow: ellipsis ellipsis; on Firefox only), but I want the opposite. I want something like "1 2 3 … 7 8 9" instead of "… 4 5 6 …".
So my question is simple: How to simulate QML's elide: Text.ElideMiddle in CSS? I am running short of ideas about this.
Simulation with css is possible, but I would do it in back-end (php, offline js) as that is the only way to get it right - just replacement the middle of the string with ellipsis.
I assume, that you can predict the length of this string. If not, the code will be longer by length count and condition.
With css you can cut string with less reasonable effect, imitation is possible with flex and repetition of the string. If you can't predict length of the string - back-end handling will be necessary and using css seems to be just redundancy.
... I can't force a snippet to read the function - it will be with inline js...
function elip(i,str){
var x = str.replace(str.slice(i,-i),' ... ');
document.write(x);}
/* for snippet only */
section{ background: #014; color: #fff; padding: 20px; margin: 20px auto}
p{ min-width: 5em; white-space: nowrap; display: flex; }
span{ background: #fff; color: #014; padding: 5px}
hr{ background: 0; border: 0}
/* imitation */
p{ white-space: nowrap; display: flex}
span{ display: inline-block; overflow: hidden; min-width: 1em}
.short{ width: 5em}
.mid{ width: 20em}
#css span{ max-width: 50%}
#css span:first-child{ display: flex; justify-content: flex-start}
#css span:last-child{ display: flex; justify-content: flex-end}
#css:hover span:nth-child(2){ background: #abc}
#css .triple span:nth-child(2){ color: transparent; width: 1em}
#css .triple span:nth-child(2)::before{ content: ' ... '; color: initial}
<section><h1>js</h1>
i=3 <hr>
<span><script>var i=3; var str='Beethoven'; document.write(str.replace(str.slice(i,-i),' ... '));</script></span>
<hr> i = 20; - more than string length - too much <hr>
<span><script>var i=20; var str='Beethoven'; document.write(str.replace(str.slice(i,-i),' ... '));</script></span>
<hr> i = 20 <hr>
<span><script>var i=20; var str='Lorem ipsum dolor sit amet, consectetur adipiscing elit'; document.write(str.replace(str.slice(i,-i),' ... '));</script></span></section>
<section id="css"><h1>css</h1> <h3>string - ellipsis - string</h3>
5em<p class="short">
<span>Beethoven</span><span>...</span><span>Beethoven</span></p>
20em<p class="mid">
<span>Beethoven</span><span>...</span><span>Beethoven</span></p>
20em<p class="mid">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
<span>...</span>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span></p>
<h3>lazy - triple string</h3>
5em<p class="short triple">
<span>Beethoven</span><span>Beethoven</span><span>Beethoven</span></p>
20em<p class="mid triple">
<span>Beethoven</span><span>Beethoven</span><span>Beethoven</span></p>
20em<p class="mid triple">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span></p>
</section>
Related
I want to know how I can set the width of an element to fit-content, but I also want to add some more width. I cannot use padding, I only want to use width. Maybe something like width: fit-content + 50px or something like that?
EDIT:
Example:
.element{
width: fit-content + 50px;
}
It's not possible to use calc() to combine intrinsic and extrinsic units. The only option here is to use padding. Since you said you cannot apply padding to your element, you would need to create a child element to carry these styles.
Here's an example (I've added background to each to visualize)
.acharb-outer {
width: fit-content;
margin: 1rem 0;
background: #ffd166;
}
.acharb-inner {
padding: 0 2rem;
background: #ef476f;
}
span {
background: #06d6a0;
}
<div class="acharb-outer">
<div class="acharb-inner">
<span>Quisque ut dolor gravida.</span>
</div>
</div>
<div class="acharb-outer">
<div class="acharb-inner">
<span>Fabio vel iudice vincam, sunt in culpa qui officia.</span>
</div>
</div>
<div class="acharb-outer">
<div class="acharb-inner">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed.</span>
</div>
</div>
I want to get the exact div height that contains certain elements within it, I have margins and padding associated with that div.
here HTML:
<div class="main">
<div class="child">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
</p>
<ul>
<li>test</li>
<li>test333</li>
</ul>
<p>
<strong>testststststs</strong>
</p>
</div>
</div>
css:
.main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
height: 60px;
overflow: hidden;
border: 1px solid #000;
}
.child{
margin: 10px 10px 10px 25px;
font-size: 13px;
line-height: 16px;
}
Js:
var cont = document.getElementsByClassName('main-class')[0];
var child = cont.getElementsByClassName('child')[0];
console.log(cont.clientHeight); //60
console.log(child.clientHeight);//40
console.log(child.offsetHeight);//40
i'm not sure if im getting the correct height for the child as the height seems to be lesser than the parent height- if that is the case why would it truncated as shown here:
https://jsfiddle.net/cudwb2yz/
I want to get the entire height of the div- child document including the content that has been hidden with the overflow:hidden property.
any idea what im doing wrong?
Hello I have problem when I make header using html and css. I have my header in fixed position, but the content is covered up my header. I want my content position under header when I run it. One more, I set header width 100% but it shift to the right so it doesn't cover up whole width on the screen.
[UPDATED]
<style>
#media(min-width: 468px) {
body{
background-color: aqua;
}
.container-1{
display: flex;
/*
align-items: flex-start; -->box 1 lebih sempit ke atas
align-items: flex-end; -->box 1 lebih sempit ke bawah
align-items: center; -->box 1 lebih sempit ke tengah (atas bawah)
flex-direction: column; -->flex box menjadi kolom
*/
}
.container-2{
display: flex;
/*
justify-content: flex-end;
justify-content: flex-start;
*/
justify-content: space-between; /*ada spasi diantara kotak*/
}
}
.container-3{
display: flex;
flex-wrap: wrap;
}
.container-1 div, .container-2 div, .container-3 div{
border:1px #000000 solid;
padding:10px;
}
.box-1{
flex:2;
order:2;
}
.box-2{
flex:1;
order:1;
}
.box-3{
flex: 1;
order:3;
}
.container-2-box{
flex-basis:20%;
}
.container-3-box{
flex-basis: 10%;
}
header{
padding: 0.5rem;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: beige;
position: fixed;
width: 100%;
margin:0;
}
.whole-container{
margin-top:2.0rem;
}
</style>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Flexbox</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<header>
<h1> Flexbox</h1>
</header>
<div class="whole-container">
<div class="container-1">
<div class="box-1">
<h3>Box 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="box-2">
<h3>Box 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="box-3">
<h3>Box 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="container-2">
<div class="container-2-box">
<h3>Box 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-2-box">
<h3>Box 5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-2-box">
<h3>Box 6</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="container-3">
<div class="container-3-box">
<h3>Box 7</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-3-box">
<h3>Box 8</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-3-box">
<h3>Box 9</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-3-box">
<h3>Box 10</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-3-box">
<h3>Box 11</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-3-box">
<h3>Box 12</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</body>
</html>
Without seeing your HTML code it is a bit guessing, but I'll give it a go.
Adding a position: fixed to an element will make it flow above the other content. The element is taken out of the document flow. So the overlapping is natural behavior.
To prevent the content to be hidden, you should add a padding to the parent of the boxes. I'm guessing that when you add the following code, it solves the problem
body {
padding-top: 3rem; /* should be at least the height of the header*/
}
The second question about the position of the header can be fixed by the following code:
/* option 1, add a left position:*/
header {
...
left: 0;
}
/* option 2, remove the width, use left and right position instead: */
header {
...
/* width: 100%; remove this line */
left: 0;
right: 0;
}
body {
margin: 0;
}
body {
margin: 0;
}
header {
padding: 0.5rem;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: beige;
position: fixed;
width: 100%;
/*not cover whole width*/
margin: 0;
}
.whole-container {
margin-top: 2.0rem;
}
<body>
<header>
0000
</header>
</body>
It seems to be hopeless, because the ellipsis is not in the DOM, it's just a render trick by the browser
I am asking because I am not a html/css guru, so many ezoteric tricks may exist I am not aware...
This will be a little tricky...It looks like you are using .ellipsis class on ellipsis text...
...so try to append a span on every .ellipsis class element using each jQuery. Use position to align that span at end of text
...and then add a click event to that span
Note: I added a background color to that span just for visual
Stack Snippet
$(".ellipsis").each(function() {
$(this).append("<span class='dots'></span>")
})
$(document).on("click", ".dots", function() {
console.log("ellipsis element is clicked");
})
p {
width: 150px;
border: 1px solid;
font: 13px Verdana;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
}
span.dots {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 12px;
background: #ff000052;
z-index: 99;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
You cannot attach events to pseudo-content, and text overflow characters are pseudo-content, in the same way content rendered by ::before and ::after is pseudo-content.
And like all pseudo-content, any clicks to it will trigger an event on the element to which it belongs.
Maybe add an event listener to the window and check if the mouse click has the same x and y coordinates as your ellipses?
<script>
function hover(description) {
console.log(description);
document.getElementById('pricehover').innerHTML = description;
}
</script>
I am using the above script to create a list that gives information on hover which appears to the right of the list. I use the following on list items within the HTML.
<li class="pricegrid" onmouseover="hover('<h1>100 Euros</h1> <br> <p>Pricing includes etc etc</p>')">Pedicure Behandling</li>
And the description is added to the following div
<div id="pricehover">Hover over the items to the left to see the price and description.
</div>
My problem is that my description cannot hold more than a few characters when I want to, if possible, completely style the div content with a whole pageworth of description including images. Can anyone explain why this isn't working or possible and perhaps give me a way to do what I want to do?
Thankyou.
EDIT: I made a pen here. http://codepen.io/anon/pen/YXwwag
You can hide the content (any HTML markup) you want to show inside the li element itself in a hidden div, and then swap it into the right side div when you hover.
Codepen forked from yours - http://codepen.io/anon/pen/doGXeV
HTML (change li)
<li class="pricegrid" onmouseover="hover(this)">Pedicure Behandling<div><h1>100 Euros</h1> <br> <p>Pricing includes etc etc</p></div></li>
JavaScript (change hover)
function hover(t) {
document.getElementById('pricehover').innerHTML = t.childNodes[1].innerHTML;
}
CSS (class for hiding) - you could also just add it to the inline styles of the li's inner div, but that would be messy.
.pricegrid > div
{
display: none;
}
Check out this pen, I created.
No javascript
http://codepen.io/anon/pen/KpVVmM
ul{
width:200px;
display:block;
position:relative;
}
.description{
position:absolute;
top:0;
left:0;
width:300px;
transform:translate(200px,0);
border:1px solid #ccc;
display:none;
}
li:hover > div.description{
display:block;
}
<ul>
<li>Lorem ipsum.<div class='description'>Lorem ipsum dolor sit amet, consectetur.</div></li>
<li>Maxime, cupiditate.<div class='description'>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div></li>
<li>A, ratione.<div class='description'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas.</div></li>
<li>Asperiores, labore?<div class='description'>Lorem ipsum dolor sit.</div></li>
<li>Fugit, amet.<div class='description'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, accusamus?</div></li>
</ul>
Maybe dl>dt+dd is a better semantic markup for you, btw.
http://www.w3schools.com/tags/tag_dl.asp