I've added a lot of extra CSS (in a custom CSS tab) to a standard Call-to-Action widget in Elementor. Among those lines I used text overflow property. I've noticed that in Safari this simple code works only if I change the size of a window. By default when page is only loaded it doesn't work on Safari. What do I do wrong and how to fix it?
Maybe there is another way of editing CSS for this Elementor Pro widget in particular?
.elementor-post__title{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.elementor-post__excerpt{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
Related
When using following css on h3 element, lowest parts of fonts on last line are cut-off.
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
Font-size is 33px and line-height 1.12
It happens consistently on firefox and chrome.
I found a fix, however, I would like to know why it happens, am I missing something or is it a browser-consistent bug?
The following demo (submitted as an SO answer) illustrates usage of ellipsis with flexbox layout. However, it doesn't seem to work on mobile Safari - the text is not shortened at all (tested on iPhone 5, iPhone X and iOS 11.4 emulator in XCode). It works on all desktop browsers including Safari.
http://jsfiddle.net/Blender/kXMz7/1/
.parent-div {
display: -webkit-flex;
display: -moz-flex;
display: flex;
}
.text-div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.icon-div {
-webkit-flex: 1;
-moz-flex: 1;
flex: 1;
}
<div class="parent-div">
<div class="icon-div">X</div>
<div class="text-div">This is text I'd like to truncate when space doesn't permit</div>
</div>
Is this a known problem?
https://www.w3schools.com/css/tryit.asp?filename=trycss3_text-overflow, sets width to truncate the characters when the given width isn't enough.
Although while using flex, setting 'width' is not recommended. I just added flex-basis: 40%; in 'text-div' class and I could see the truncation happening.
I use vuejs and quasar framework, I'm customizing a third party component, there is a point where I have nested flex-rows, this is all defined by the inner classes of the quasar, so I can not control this directly so I'm overwriting some parts of the css .
My problem is that even when I have no content the flex-row is rendering a height, and this is not expected, since the row is empty. I need to know how to fix this.
Since some settings come from the quasar and I do not have access I will make available what the browser gives me data after rendering.
the tag with the problem in question is a div:
div{
align-content: normal;
align-items: normal;
align-self: auto;
alignment-baseline: auto;
direction: ltr;
display: flex;
flex-basis: auto;
flex-direction: row;
flex-grow: 0;
flex-shrink: 1;
flex-wrap: nowrap;
height: auto;
}
Apparently the height auto is generating this.
I am using the -webkit-line-clamp property in order to achieve multi-line ellipsis on Chrome. We have set the height and max-height appropriately so that we see exactly N lines and the proper ellipsis. However, as soon as we zoom in or zoom out in the browser, partially cut off (N+1)th line shows. Is there any way to prevent this partially cut off line from being shown regardless of the zoom level?
CSS is:
myText {
font-size: 12px;
line-height: 14px;
width:200px;
height:58px;
max-height:58px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
and HTML is
<div class="myText">imagineSomeLongTextHere</div>
In case it helps someone - I added the following CSS to fix the issue:
-webkit-box-pack: end;
I am trying to create a vertical nav menu using some of the new css3 techniques but so far I can only get closest to the desired look with display:table . I do not like using display:table/table-row/table-cell primarily because they limit the "cells" to table form (for example you can't space the "rows" or "cells" with margins) and I also don't like the extra divs that only serve to make the list vertical. The reason I went this direction originally was to use vertical-align: middle for the text. When I tried using flex box methods it kept putting both lines of text on the same line and I could not figure out how to split them.
Can you help me achieve the same look but with more flexibility and preferably no extra divs?
Working example of display: table method (does not appear to be perfectly centered though): http://jsfiddle.net/jKRDQ/
Closest I came using flex box method: http://jsfiddle.net/4wSN5/
Closest without CSS3: http://jsfiddle.net/6gRcp/
Your table method has invalid markup: only li elements can be children of ul or ol elements. If you need that extra div, it has to be inside the li.
Your Flexbox method is missing box-orientation/flex-direction. By defult, it is set to horizontal/row, which is what makes them all appear in a row. The CSS for your li should look like this:
http://jsfiddle.net/4wSN5/1/
#slide-out-menu li {
width: 75px;
height: 75px;
border: 1px solid black;
display: -webkit-box;
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-flex-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
Alternately, you could have stayed with the horizontal/row orientation and used wrapping, but that would have only worked on browsers that support the standard spec (excluding Firefox with experimental Flexbox support enabled).
You may need to drop the prefixes for Firefox because their implementation is so bad. I only included them because my Sass mixins emit them.
If you're going to use Flexbox, never use the properties from the 2009 spec by themselves. While Opera and Chrome (both under the -webkit- prefix) support both the old and new specs (Opera is unprefixed on the new ones), the old ones will be dropped eventually.