I've seen this and this, and tried both methods to apply word breaking to a span tag. Neither one works in IE8 for me.
Here's the code I'm trying:
.bodyWrap .dashboard .col2 .wrapper .locInfoWrap .nickname {
font-size:16px;
color:#000;
word-wrap:break-word;
-ms-word-wrap: break-word;
-ms-word-break: break-all;
}
EDITED TO ADD - I just tried adding a width to the span element, like this:
.bodyWrap .dashboard .col2 .wrapper .locInfoWrap .nickname {
font-size:16px;
color:#000;
word-wrap:break-word;
-ms-word-wrap: break-word;
-ms-word-break: break-all;
width:100%;
}
Still looks the same. Help, please! This is a major requirement for our client.
Here's what it ends up looking like (larger version here):
What do I need to do to get this to work in IE8?
What ended up working for me was setting the span to have a display of inline-block.
Related
I'm definitely not a CSS nor HTML expert, but I think my code is correct. When I run it in Internet Explorer it works fine and shows some white space between the headers, as it should be. But when I sent it to MS Outlook 2010 the headers are mixing. And I can't seem to find a way to fix this in a clean way...
MS Outlook 2010 (Not OK):
Internet Explorer (OK):
HTML/CSS-Code:
<!DOCTYPE html>
<html><head><style type="text/css">
body {
font-family:verdana;
background-color:white;
}
h1 {
background-color:black;
color:white;
margin-bottom:0px;
text-indent:10px;
}
h2 {
background-color:lightGrey;
margin-bottom:10px;
text-indent:10px;
}
p {
font-size: 14px;
margin-left:10px;
}
</style></head><body>
<h1>My Big Title</h1>
<h2>My Smaller title:</h2>
<p>Hello world :)</p>
</body></html>
Thank you for your help on solving this little nasty issue.
Changing h1 to margin-bottom:10px; doesn't fix it either:
Fixed it by adding page-break-before: always; as found in this post.
Man I'm glad I solved this one! Has been bugging me a long time now.
Fix:
h1 {
background-color:black;
color:white;
margin-bottom:10px;
text-indent:10px;
page-break-before: always;
}
h2 {
background-color:lightGrey;
margin-bottom:10px;
text-indent:10px;
page-break-before: always;
}
Internet explorer probably applies default browser margins to the header elements which explains why the top and bottom text are pushed under each other.
If your first line of text is the Big Title, try updating
h1 {
background-color:black;
color:white;
margin-bottom:0px;
text-indent:10px;
}
with
h1 {
background-color:black;
color:white;
margin-bottom:10px;
text-indent:10px;
}
This will apply a 10 pixel margin at the bottom of your first h1 text. You can change value to your needs.
I am implementing a close button on an element containing text with CSS. The close button is generated content from a pseudo element with content:'X';. I need the cursor to become a pointer on that "X" so I used :
cursor:pointer;
It works fine in Chrome and Firefox but it doesn't seem to work in Internet Explorer (testing on IE11 windows 7).
DEMO (test in IE)
I also tried with cursor:hand; but it doesn't solve the issue. How can I make the cursor a pointer while hovering the "X" but not on the text of the div?
Relevant code :
div{
font-size:2em;
position:relative;
display:inline-block;
}
div::before{
content:'X';
cursor:pointer;
display:block;
text-align:right;
}
<div>some text</div>
--EDIT--
I am aware that making a child or sibling in the markup and applying cursor:pointer; to it will work but I would like to minimize markup and use a pseudo element for the close button as it has no semantic value.
I'm really late to the game, but I just now figured out a solution to this problem.
This solution allows a pointer on the child element, while retaining a default cursor on the parent element.
(See the accepted answer here for a solution that doesn't include keeping the parent element's cursor default: cursor: pointer doesn't work on :after element?)
First of all, for this hacky solution, you have to give up the ability to interact with the parent element using the mouse.
Set the parent element to cursor: pointer.
Then, setting the parent element to pointer-events: none will allow you to "click/hover through" the parent element.
Then, for the pseudo element, just re-enable pointer events with pointer-events: auto.
Voila!
div{
font-size:2em;
position:relative;
display:inline-block;
/* remove ability to interact with parent element */
pointer-events: none;
/* apply pointer cursor to parent element */
cursor:pointer;
/* make it more obvious which is child and which parent for example*/
background: darkred;
}
div::before{
content:'X';
display:block;
text-align:right;
/* restore ability to interact with child element */
pointer-events: auto;
/* make it more obvious which is child and which parent for example*/
width: 30px;
text-align: center;
background: white;
}
<div>some text</div>
I believe that it's not working in pseudo elements in IE,
What I'm use to do is add cursor: ponter to main element.
If you need to add cursor: pointer to pseudo element only, than only way is to add child element
like:
<div><span></span>some text</div>
div{
font-size:2em;
position:relative;
display:inline-block;
}
div > span{
cursor:pointer;
}
div > span::before{
content:'X';
display:block;
text-align:right;
}
But than is no point to using pseudo class...
demo
HTML:
<div>
<div id="closebutton">
X
</div>
some text
</div>
css:
div{
font-size:2em;
position:relative;
display:inline-block;
}
div#closebutton{
cursor:pointer;
display:block;
text-align:right;
}
DEMO
demo
div{
font-size:2em;
position:relative;
display:inline-block;
border:1px solid #000;
margin:20px;
padding:20px;
}
div:after{
cursor:pointer;
display:block;
position:absolute;
height:20px;
width:20px;
top:-10px;
right:-10px;
content:'X';
font-size:15px;
}
<div>
some text
</div>
In order to make IE 7,8,9,10 behave like regular browsers that can deal with pseudo selectors, I always use IE7.js, a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues related to Internet Explorer. An alternative would be modernizr.js which is a good implementation to get pseudo selectors working with IE. I hope, that helps.
On photo you can see my problem,
Problem is because my first text is to long and don't show some letters on end,
I try with padding, margin ... not work i really don't know what to add there for this look like in 2. row
main
.qa-main {padding-left:20px; float:left; margin-bottom:2em; width:626px; clear:left; overflow:hidden;
.qa-q-view-extra {margin-bottom:18px; font-style:normal;}
.qa-q-view-extra-content {font-weight:bold; background:#FFF; color:#0ba200; font-size:15px; text-decoration:underline;}
Thanks.
You should add word-wrap: break-word; to the div.
.qa-main {
...
word-wrap: break-word;
}
Lets say this markup:
<div id="socialMedia">
<a class="Twitter">Twitter</a>
</div>
What i want is only to be visible the first letter of the text (in this case, just a T)
(Actually I won't end up using it but I am curious about this; sure can be helpfull later)
So this was my a attempt:
#socialMedia .Twitter{
display:none;
}
#socialMedia .Twitter:first-letter {
display: block !important;
}
I was able to check that it won't achieve it. Question is why? and is there some work-around this?
-EDIT-
We are looking for IE=+7/8 version capable solutions..
Salut
Try something like this:
.Twitter {
font-size: 0;
}
.Twitter:first-letter {
font-size: 12px;
}
<div class="Twitter">Twitter</div>
Maybe this is not the best solution, but it works.
Edit: Disclaimer: this does not work according to comments. Please don't use as-is without checking it fits your needs.
If you check the specification for the :first-letter pseudo-element, you'll notice the following:
The :first-letter pseudo-element must select the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.
The important word here is "block."
You are trying to use the pseudo-element on an <a/> tag with class of Twitter. By default, anchor tags are inline elements (not block level elements).
For your given markup, one solution to your problem would be to style the anchor this way:
.Twitter {
display:block;
visibility:hidden;
}
.Twitter:first-letter {
visibility:visible;
}
I'm not sure exactly what you are going for, but that is good enough for experimental purposes. Check out a demo here: http://jsfiddle.net/H7jhF/.
Another way is to use color: transparent
.twitter{
display: block;
color: transparent;
}
.twitter:first-letter{
color: #000;
}
<div id="socialMedia">
<a class="twitter">Twitter</a>
</div>
JSFiddle
However, this won't work for lte IE8.
References:
IE7 IE8 IE9 color:transparent property
color: transparent is not working in Internet Explorer
What you're doing is like hiding a parent element and trying to show one of its children, it won't work because the parent's style overrides it. The parent element also has to be a block level element for it to work. Like a div or p tag, or display: block; on the a tag.
Here's something using color:
HTML
<div id="socialMedia">
<a class="Twitter">Twitter</a>
</div>
CSS
body {
background-color:#FFF;
}
.Twitter{
display: block;
color:#FFF;
}
.Twitter:first-letter {
color:#000;
}
shoot the content off the page and show the letter using dynamic content:
.twitter{
text-indent:-9999px;
display:block;
position:relative;
}
.twitter:before,.twitter::before{
content:"T";
position:absolute;
width:10px;
height:15px;
z-index:100;
text-indent:9999px;
}
at play in this fiddle:
http://jsfiddle.net/jalbertbowdenii/H7jhF/67/
Why not just use JavaScript and split the string into an array and use the first item in the array. Or charAt()
The pure-CSS answers use visibility and color tricks to hide the remaining letters, but they are still present and affecting layout. It could cause layout issues, e.g. if you wish to float the element and put something beside it.
I found a funny way to do this without hidden elements. The trick is to shrink the entire word down to almost nothing and then blow up just the first letter. It's a bit like OP was trying to do, but it works because it's operating on a continuous spectrum rather than display: none which just shuts down anything inside it. (Kind of an analogue > digital situation.)
Demo
HTML:
<div>Ding Dong</div> and other stuff
CSS:
div {
font-size: 0.0000016px;
float: left;
}
div::first-letter {
color: red;
font-size: 10000000em;
}
Result:
Here's what I do:
.Twitter{
display:block;
width:1ch;
overflow:hidden;
white-space: nowrap;
}
I added these css. But I can't get the placeholders/watermarks to have ellipsis. They do have the red font though.
input::-webkit-input-placeholder {
color: red !important;
max-width: 95% !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
overflow: hidden !important;
}
input:-moz-placeholder {
color: red !important;
max-width: 95% !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
overflow: hidden !important;
}
Since I am working for mobile, I want it to work in Safari.
Using the :placeholder-shown selector works well and will ensure any text input doesn't get hidden. Compatibility is pretty solid too.
input:placeholder-shown {
text-overflow: ellipsis;
}
<input placeholder="A Long Placeholder to demonstrate"></input>
YES
Method 1
Still supported on all browsers.
Overflow ellipsis of a placeholder can be achieved using the attribute selector:
[placeholder]{
text-overflow:ellipsis;
}
This will also have added the side effect of adding ellipsis to the inputs value in some browsers. This may or may not be desired.
[placeholder]{
text-overflow:ellipsis;
}
input{width:150px;}
<input placeholder="A long placeholder to demonstrate"></input>
<input value="A long value to demonstrate"></input>
Method 2
No longer supported.
As of Chrome and Edge V100+ the ::placeholder pseudo element selector does not support the text-overflow property.
::placeholder{
text-overflow:ellipsis;
}
::placeholder{
text-overflow:ellipsis;
}
input{width:150px;}
<input placeholder="A long placeholder to demonstrate"></input>
WHY?
It seems like a tightening of the conformation to the specification:
Only the subset of CSS properties that apply to the ::first-line pseudo-element can be used in a rule using ::placeholder in its selector.
All font-related properties: font, font-kerning, font-style, font-variant, font-variant-numeric, font-variant-position, font-variant-east-asian, font-variant-caps, font-variant-alternates, font-variant-ligatures, font-synthesis, font-feature-settings, font-language-override, font-weight, font-size, font-size-adjust, font-stretch, and font-family.
All background-related properties: background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachment, and background-blend-mode.
The color property
word-spacing, letter-spacing, text-decoration, text-transform, and line-height.
text-shadow, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, and vertical-align.
OLDER BROWSERS
Need support for older browsers?
IE not playing nicely?
I created a little css hack to simulate a placeholder. Use this code to simulate your inputs placeholder. It's a little dirty but can offer support as far back as IE6.
.ellipsis{
box-sizing:border-box;
position:relative;
padding:0 5px;
background:#fff;
color:rgba(0,0,0,0.5);
width:100%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.ellipsis input{
box-sizing:border-box;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
display:block;
background:none;
border:1px solid #ddd;
color:#000;
padding:0 5px;
}
.ellipsis input:focus{
background:#fff;
}
<div class="ellipsis">
A Long Placeholder to demonstrate A Long Placeholder to demonstrate A Long Placeholder to demonstrate
<input></input>
</div>
Support outside of this range would require javascript.
To cover as many browsers as possible, try these:
[placeholder]{
text-overflow:ellipsis;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
text-overflow:ellipsis;
}
::-moz-placeholder { /* Firefox 19+ */
text-overflow:ellipsis;
}
:-ms-input-placeholder { /* IE 10+ */
text-overflow:ellipsis;
}
:-moz-placeholder { /* Firefox 18- */
text-overflow:ellipsis;
}
According to the specification, text-overflow applies only to block containers like div and p tags. And since inputs are not containers, you cannot apply this CSS rule.
Just input { text-overflow: ellipsis; } without any placeholder pseudos did the trick.