I am trying to use text-overflow: ellipsis to truncate text on my website. It displays correctly in Firefox, but does not display in IE; I have included my code and examples of how it displays in both Firefox and IE below:
.ellipsis {
font-weight: bold;
height: 1.2em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 150px;
}
text-overflow has been available as of IE6, so you do not need to use a Microsoft vendor prefix. You might, however need those extensions for Opera and Webkit depending on what your site plans to support.
What version of Internet Explorer are you testing this in?
You can obviously use jQuery plugin for this same functionality fairly easily, but you shouldn't need to if IE is your only issue because, as stated, it should support the feature.
Here is a simple reproduction of code that should work using this functionality:
<!DOCTYPE html>
<html>
<head>
<title>text-overflow: ellipsis</title>
<style type="text/css">
.ellipsis {
height: 1.2em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 150px;
}
</style>
</head>
<body>
<div class="ellipsis">
This is a test of the less-than-emergency
broadcast system. This is only a test.
</div>
</body>
</html>
I found the solution, because I use a tag to wrap the div tag so IE work not well.
I moved a tag to inside div tag and it work well. Thank everyone for helping me.
Related
When I'm removing all the styles with this CSS code:
* {
all: unset;
display: revert;
}
CSS Hyphens don't affect in Chrome browser. For example:
div {
font-size: 3rem;
-webkit-hyphens: auto;
hyphens: auto;
word-break: break-word;
word-wrap: break-word;
width: 200px;
background: #ddd;
}
Demo on CodePen
Any way to solve it without deleting the CSS reset code above?
I'm not deeply familiar with the hyphens CSS property, but it seems that it only works when you've specified the language in the DOM using lang=. E.g. <html lang="en">...</html> will allow you to use hyphens anywhere across the document.
In your CodePen example, the lang="en" property is automatically added by CodePen to the <html> attribute.
Now what Chrome seems to do (and Firefox doesn't do) is that it sees the all: unset; property on the HTML attribute and just forgets that lang="en" exists, at least for the purpose of hyphens.
You can confirm this by adding lang attribute to the div directly, and adding all: unset; only on that div, then removing it from the div.
A quick fix here could be to change your CSS reset selector to html * instead of *, i.e. keeping everything inside <html> tag but excluding the <html> tag itself, if you're okay with this compromise:
html * {
all: unset;
display: revert;
}
Complete example on CodePen
I'm trying to get hyphens working on text that has <span> elements inside for highlighting. This seems to break the hyphen algorithm. Is there any way to fix the behaviour so that hyphens are placed the same as without <span> elements?
I'm not asking about a workaround like
The Code (sandbox: https://codepen.io/anon/pen/ayzxpM):
.limit {
max-width: 50px;
hyphens: auto;
font-size: 20px;
background-color: #eee;
}
span {
color: red;
}
<div class="limit">
<p>
Appletreefruitthing
</p>
<p>
Apple<span>tree</span>fruitthing
</p>
</div>
Using the lang attribute
Adding the lang attribute as Vadim Ovchinnikov suggested (<div class="limit" lang="en">) can lead better results on some platform/browser combinations. On Firefox 54, Windows 10 this is the result:
But even that seems buggy. The hyphen should be black in my opinon and the hyphen algorithm seems to miss the chance to make a line break between "fruit" and "tree", also completly ignoring the max-width that is set for the container.
Actually, it does work with spans, in a number of browsers. You just used a word that is not recognized. Here's an example with a normal English word, that works in IE (should also work in Edge) and FF on Win7:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1">
<title>Demo</title>
<style>
div {
max-width: 50px;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
font-size: 20px;
background-color: #eee;
}
span {
color: red;
}
</style>
</head>
<body>
<div>
<p>Incomprehensibilities</p>
<p>Incom<span>pre</span>hensibilities</p>
</div>
</body>
</html>
It does not work in Chrome on Win, because that currently (June 2018) still does not support hyphens at all. It also does not work in any iOS browser. So you will have to use soft hyphens after all. But as you stated that you were curious about the mechanism, I thought it worthwhile to still post this answer.
Chrome has only partial support for hyphens property (only Mac and Android platforms), so you can't make it work on Windows.
I don't see any difference between span presence and absence in Firefox, IE and Edge (all on Windows) for this code.
To make it work there you'll need set lang for container and add vendor prefixes (for -ms-hyphens IE/Edge and -webkit-hyphens for Safari). Demo:
.limit {
max-width: 50px;
font-size: 20px;
/* Safari */
-webkit-hyphens: auto;
/* IE, Edge */
-ms-hyphens: auto;
hyphens: auto;
background-color: #eee;
}
span {
color: red;
}
<div class="limit" lang="en">
<p>
Appletreefruitthing
</p>
<p>
Apple<span>tree</span>fruitthing
</p>
</div>
To work in all browsers you may shouldn't use CSS hyphens property, just insert manually where you want hyphens.
.limit {
max-width: 50px;
font-size: 20px;
background-color: #eee;
}
span {
color: red;
}
<div class="limit">
<p>
Appletreefruitthing
</p>
<p>
Apple<span>tree</span>fruitthing
</p>
</div>
hyphens: manual
togteher with
might work
see documentation here
https://css-tricks.com/almanac/properties/h/hyphenate/
this code on codepen seems to work
<div class="limit">
<p>
Appletreefruitthing
</p>
<p>
Apple<span>tree</span>fruitthing
</p>
</div>
CSS
.limit {
hyphens: manual;
}
word-break: break-word working fine in all the other browser including Internet Explorer.
But as soon as you add it into a <SELECT></SELECT> element.
Here is a sample that works in all browsers except IE.
<!DOCTYPE html>
<html>
<head>
<style>
p.test, select
{
width:100px;
border:1px solid #000000;
-ms-word-break: break-all; /* wraps the text in the selector so it prints properly*/
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
white-space: pre-wrap;
border: 1px dotted red;
}
</style>
</head>
<body>
<p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
<select class="test">
<option>testshr1</option>
<option>tb details</option>
<option>This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword.</option>
<option>test</option>
</select>
</body>
</html>
This is a feature in IE: it simply renders each option element on one line. Looking at the situation in Developer Tools, you can see that your settings are recognized (and inherited, when applicable, from select to option). But the rendering of a select element is special, and does not do line breaks.
The conclusion is that you should not create such problems. The select element is meant to be used for relatively short options, and the IE behavior is quite understandable. Either shorten the option texts considerably, or use a different control, like a set of radio buttons.
try following code
<style>
select option{
width:100px;
word-break: break-all;
}
</style>
Try using this:
word-wrap: break-word
I´m working on a web application, now the css is working perfectly with Opera, Chrome, Firefox and Safari. I just have some specific problems with IE8 and IE9.
My doubt is, what is the best choice, write an exclusive css for IE or just incorporate specific lines for IE?
This works with Chrome, Firefox, Safari and Opera:
#table{
width: 60%;
margin-top: 60px;
margin-left: auto;
margin-right: auto;
}
Code for explorer:
#table{
width: 60%;
margin-top: 60px;
margin-left: 20%;
margin-right: auto;
}
I´m looking for the fastest choice on load.
Thanks in advance.
I find it easiest to isolate the tweaks into an IE-specific stylesheet, and then use conditional comments (which only IE understands anyway) to load them after the normal CSS.
Here's an example from one project of mine (an ASP.NET MVC2 project):
<!--[if lte IE8]>
<link rel="stylesheet" type="text/css" href="<%: Url.Content("~/content/ie-fix.css") %>" />
<![endif]-->
I'm using the following css :
.GridDraggedRow tr td.firstCol{
padding: 2px 10px 0 0;
text-align: right;
vertical-align: top;
width: 1px;
width: 1%\9; /* IE9 and below */
white-space: nowrap;
}
As you can see, I'm using a pretty ugly css hack.
My problem is that this hack is removed from the minified css file I'm generating with AjaxMin.
It is a post-build step in our delivery system so we're gonna stick with AjaxMin.
The ajaxmin documentation explains that several comment-based hacks are allowed with the use of the 'hacks' flag, ex:
ajaxmin -css -comments:hacks GridLayout.css
Unfortunately the \9 hack is not allowed.
What can I do ?
Parsing the generated file isn't a good idea in my opinion.
I guess my best choice is to insert this hack in another non-minified file or directly in the html page between tags...
Do you guys have a better idea ? It would be great that ajaxmin provide an exclusion section...
You shouldn't be using any of those ugly hacks!!
Use Paul Irish's conditional comments method instead.
Use this at the opening of your HTML tag:
<!--[if lt IE 10 ]> <html class="lt-ie10"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
Then, in your CSS, use this:
.GridDraggedRow tr td.firstCol{
padding: 2px 10px 0 0;
text-align: right;
vertical-align: top;
width: 1px;
white-space: nowrap;
}
.lt-ie9 .GridDraggedRow tr td.firstCol{
width: 1%;
}
This is much cleaner, and much more reliable.