I like displaying emails properly, meaning not [at].
To fight the bots I reverse the text in the html and then re-reverse it with css using direction: rtl. That worked fine for many many years, until an email dared to break lines.
You can see what happens on the screenshots; kinda hard to explain–
Thats the mess that happens
This is how it looks when there is enough space
The http-host is always the same, so I figured using text-overflow: ellipsis together with white-space: nowrap and overflow: hidden on the <a>. That went south aswell;
(side note: it wasn't possible for me to fully highlight the visible text?)
(The end of the highlight is NOT the end of the box!)
Okay; the text-overflow clipping comes first, then the reversing; I get it.
So lets put overflow: hidden and text-overflow: ellipsis on the parent, which is a <p> and the white-space: nowrap on the a (scared that a telephone number will get chopped off)
I played around with a combination which styles go to the p and which to the a .. and I had one solution (which I unfortunately can't reproduce oO) where the dots were at the right side (which is what I want) but the text still gets chopped of an the visual left of the outcome, meaning the name name of the email, which I do not want to clip!
Long question short..
How can I get the following result?
S.Rossa#park-reside...
When my email markup looks like this:
<a href="/email.php?to=rossa" class="direction">
<?php echo strrev("S.Rossa#park-residenz-alfeld.de"); ?>
</a>
Out of many reasons I cannot go back from the direction: rtl thing on the emails.
Please keep that in mind when suggesting a way to
keep the email from breaking lines, no matter what
and a convenient way to clip it with ...
with css only
Thanks!
The browser is given a string. When you tell it to shrink it and replace what doesn't fit with an ellipsis, it will always cut from the end of the string. It doesn't know your string is reversed and it trusts you when you tell it: this string should be read from right to left (direction:rtl). The end is on the left side.
Therefore, with CSS alone, the closest (and most decent) thing you can get is cutting from left side and placing the ellipsis where the cut was made:
a.direction {
direction: rtl;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* proof of concept: */
width: 25%;
display: inline-block;
}
ed.dlefla-znediser-krap#assoR.S
You have two options now. Either
give up on text-overflow: ellipsis and fake it using JavaScript (works, but it's ugly) or...
you could reverse the string before you render it and give up on direction: rtl (which is actually a trick, it's not correct and is the source of the problem). Of course, you need to make sure you only do this for browsers, not for bots. The easiest way would be to check navigator.userAgent:
if (!/bot|crawler|spider|crawling/i.test(navigator.userAgent)) {
var directions = document.querySelectorAll('.direction');
for (var i = 0; i < directions.length; i++ ) {
directions[i].textContent = directions[i].textContent.split('').reverse().join('');
}
}
a.direction {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 25%;
display: inline-block;
}
ed.dlefla-znediser-krap#assoR.S
However, navigator.userAgent is not to be trusted, as malicious bots will never declare themselves as bots. So you might want to use safer methods of excluding bots, such as a link (clickable only by bots) pointing to a php script that would set a session variable for them. If the variable is set, just add an invisible element to your page and in the above JavaScript, instead of checking navigator.userAgent, check for the added element.
If you want the emails correctly indexed by certain search engines, you should exclude them from this check.
Related
I have a list of items, where each item is split up into 3 parts.
<li>[long part(1)] [separator(2)] [important part(3)]</li>
I want the first part ("long part") to truncate instead of wrap.
I can get the first part to not wrap, while the other parts wrap - but I can't figure out how to get the browser to truncate the first part.
Here's a codepen example: https://codepen.io/fiver/pen/rGRevq?editors=1010
Use the Change view button to move the output pane to the side. Then you can use the slider to see the wrapping behaviour. I tried using flexbox ("flex try") and styling overflow attributes ("overflow try") but both just extend the text out off the view.
The third item is my workaround (just let it wrap) - it's not what I want to do, but it works.
So is there any way I can get that first part to truncate (with or without ellipsis)?
I only need to get this working in modern browsers: Edge (not actually a bid deal), Chrome, Firefox and Safari (mobile and desktop). I don't need to worry about IE or Android browser.
Example of answer: https://codepen.io/fiver/pen/yEYWmp
Your "overflow try" works but you need to put these 2 in <li>
overflow: hidden;
text-overflow: ellipsis;
as you are using spans. you need to set display property in CSS and width too.
span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 40%; /* it be upto requirment */
}
I'm working on a site wich has filters on category pages - http://www.purrfectlyyappy.com/fun-and-games/dog-toys
The filter is on the left hand side, but the text in the filter appears under the products when it's too long, is there a way i can set it to break onto a second line if the name is too long?
Seem like it should be easy, but i've been struggling on this!
This is happening because there is a css in you page
.hikashop_filter_checkbox {
white-space: nowrap;
}
Above css is already applied on your html page which is forcing elements to come in single line.
You can either remove this css and if not then use following css in label
.hikashop_filter_checkbox label{
white-space: normal;
}
Use the overflow property.
enter link description here
Here, adding :
overflow : scroll;
will make the "too long text" in a scroll area. There are many other values.
So after hours of searching I cannot find a simple solution to this problem. I run a website, and am very limited in my self taught HTML and CSS coding. My site runs Wordpress as the foundation, and when making a post, sometimes we put in long URLs. Often times those long URLs extend outside of the boundaries of the actual post, and push into the sidebar widgets, and even sometimes extending the entire page so that there is a scroll bar. Like I said my knowledge of coding is relatively limited, and I'm looking for a simple solution to fix this problem quickly. I don't want a long drawn out way to do it, as I will likely have to implement them on a daily basis. So let me know what you think about the solutions. I've read a couple things about word-wrap and but I'm just not grasping it. Please somebody who knows what they're doing explain a solution to this using HTML in terminology that anybody could understand.
Thanks in advance.
Here's a little look at a few things you can do, and what effect they'll have:
http://jsfiddle.net/fW5bF/
In the first case, the paragraph has a set width, but the content is too long, and therefore it's height expands to enclose all the text. Notice that the text is broken up into separate lines where the white space is.
In the second case, I've used white-space: nowrap; to prevent the text from being broken up into multiple lines. This causes the text to overflow the boundaries of the paragraph element.
I then hide this overflow using overflow: hidden;.
And then I use text-overflow: ellipsis; to include ellipsis indicating that there is more text, but that we ran out of space to show it.
Now we have a single really long 'word' (such as a URL) and hence there is no white space. Therefore, by default, it just overflows it's container.
You can break up a single 'word' into multiple lines using word-wrap: break-word;.
Or again, you can use overflow: hidden; to hide the overflow, and text-overflow: ellipsis; to include ellipsis.
I suggest you look up all these properties on a reference site like MDN: https://developer.mozilla.org/en-US/docs/Web/CSS
The css rule "word-wrap:break-word" ought to do what you are looking for.
Here's a fiddle: http://jsfiddle.net/9AZtx/ using:
p
{
outline:1px solid #ccc;
width:20em;
word-wrap:break-word;
}
You can use text-overflow: ellipsis:
.element {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
I'm trying to show boxes of people's names.
The problem is that these names can get pretty long, and with a fixed width box, crazyness is sure to ensue. Long spaced text breaks, causing problems on new rows (http://jsfiddle.net/9MhWW/) and disabling line-breaks with white-space: nowrap; will overflow the box (http://jsfiddle.net/9MhWW/1/).
Working with line breaks seem like the best option. If you agree, that begs the following question: Is there a way to make sure the row-problem doesn't occur without losing part of the text, having a div for every row or giving the paragraph a fixed height?
If just one row is ok for you, set a overflow: hidden:
p { overflow: hidden; }
A nice effect will be using ellipsis to replace the overflowing text with ...:
p { overflow: hidden; text-overflow: ellipsis; }
See this update to your fiddle.
I think I have come up with a solution. So bootstrap adds loads of stuff in to make it look nice of course, but in your case we have to undo some of that. So we have to get rid of the float left and replace it with display inline-block:
.span2{
float: none !important;
display:inline-block;
}
See the fiddle update. I had to change the text alignment to match what you had previously.
I am creating a web app using ASP.NET MVC, which shows some articles to user.
And there is a summary of every article on a div.
Currently, I'm loading the whole content in summary div and set this style overflow:hidden for that. This is the result:
But that fragmentary line (last line) is ugly, also whole content is downloading to user's computer, which is bad for speed and performance.
I want to have something like this: (the image below is my goal)
(Remove that fragmentary text at last line, and add ... at the end of text)
Also it is good to avoid downloading whole content to user's computer.
How to do that?
PS: Anyone know a better title for this question?!
You can set a number of characters to show, then if text to show is bigger than the limit number, truncate:
if(text.Length > 200)
{
text.Substring(0, 200) + "...";
}
Or if you are building the system, you can create a limited field to save a preview text and in listings show the preview text instead the big content
Put your text in another div and use height + line-height
Working example:
http://jsfiddle.net/DNh4W/2/
If you want to end with ellipsis there is no solution in CSS3 for multiline text. You must use javascript, for example: http://pvdspek.github.com/jquery.autoellipsis/
Example of jquery autoellipsis: http://jsfiddle.net/bdM89/1/
First of all, I believe truncating the text (to a certain number of characters) and adding the ellipsis should be done on the server side.
Then, if you want to do this using only CSS, you need to simply let the height of the div be auto. It probably won't be the same for all, but it will look nice.
if you have no problem using CSS3 in terms of browser compatibility, you can use CSS to truncate the text, like in this tutorial:
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis; /* required for Opera */
-ms-text-overflow: ellipsis; /* required for IE8, allegedly */
-moz-binding: url('ellipsis.xml#ellipsis'); /* for Firefox; details [here][2] */
}
Regarding mozilla firefox, here is a tutorial how to deal with it using XMLs