On IE11 / win7 64 I'm noticing a very weird pattern relating to how words wrap on a textarea.
Example:
http://fiddle.jshell.net/fy2aoz28/1/
With that text on the textarea, the second line is almost empty but it has space to at least have to "to :event_name" string.
On chrome that looks like this:
So, what's going on here and is there any way to force all browsers on the same behavior?
Add the white-space property. It is used to describe how whitespace inside an element is handled.
textarea{
width: 300px;
height: 200px;
white-space: pre;
}
Should look the same in Chrome and IE now. Here's a fiddle for you to review. http://fiddle.jshell.net/fy2aoz28/2/
Related
I'm trying to float image and text in the paragraph. But there is some problem when text is long and in one line. It looks fine in the Chrome, but not in the Mozilla Firefox. You can check it there:
In the Chrome it looks as:
and FireFox:
How can I do it correctly?
Thank you for any help.
I recently ran into this and it's a silly test data mistake. If Firefox (and maybe other browsers) doesn't find a logical word break, it has nothing to wrap and therefore it stays on one line. Add spaces to your long test text and remove white-space: pre from your paragraph.
body p {
word-wrap: break-word;
}
http://dabblet.com/gist/9b9e1ca0f2c65c550471
Have you tried to use:
float:left;
word-wrap: break-word;
width: 500px;
width: ** The width of the word you want to break in px or % **;
When I use text-ident property in CSS, what I expect to see is when you focus into the text input area, the text cursor icon/caret will appear indented. But it appears as if it isn't indented until you type for first character. The only work around is to use left padding on the input element, but I want to avoid using padding because I am also setting a width and don't want to have to implement a padding fix for IE using an IE specific spreadsheet.
This bug happens in Safari.
See below for images of what I'm talking about.
On focus when there is no text, the text-ident doesn't affect the caret position:
When you start typing, it indents correctly:
After you type and then delete what you've typed, it displays what I want it to do from the beginning (indent the caret).
HTML:
<input type="text" />
CSS:
input { text-indent: 10px; }
It's a confirmed WebKit bug that has recently been resolved https://bugs.webkit.org/show_bug.cgi?id=82688
Your version of Safari may be too old for this fix to be included.
Use padding-left instead.
<style>
::-webkit-input-placeholder {text-indent:10px!important;}
:-moz-placeholder { text-indent:10px!important;}
::-moz-placeholder {text-indent:10px!important;}
:-ms-input-placeholder {text-indent:10px!important;}
</style>
This allows the text indent to focus indented, which I believe has been fixed in newer versions of webkit / safari. However, this fix should help you out with the older versions.
Thanks
I have a footer, below a textarea, containing a list and two buttons (all inline) within a div with the id #share-something. For some reason it is placed differently in Internet Explorer. I want it to look the same in IE as it does in Chrome. What am I doing wrong? http://jsfiddle.net/h3twR/
Oddly enough, IE7 seems to be fine for me, but 8 & 9 are off. If you have an IE-only stylesheet (using conditional comments), you can add this:
#share-something-container textarea {
margin-bottom: 5px;
}
*:first-child+html #share-something-container textarea {
margin-bottom: 0px; /* targets ie7 and undoes the margin above, as IE7 is okay */
}
This doesn't explain why 8 & 9 behave differently, but I've long since given up looking for logic and reason in IE.
There seems to be some kind of difference between IE8/9 and the other browsers and how they're rendering TEXTAREA.
It looks like you just have to set TEXTAREA to display block. It seems some browsers behave differently in this situation as they will see all elements as inline and generate extra white space. However, setting it to display:inline doesn't seem to have the reverse effect, so it's weird like that.
Here's a solution:
http://jsfiddle.net/h3twR/2/
I simply added this:
#share-something-container textarea {
...
display:block;
margin-bottom:5px;
}
And it appeared to render more consistently. IE7 seems to be off a little bit more. But hopefully this helps a little.
Cheers!
I want to disallow line breaks in some places in a web page (eg. it's really ugly when the browser breaks the text "100 km/h" on two lines - in this question I'm concerned about breaking near the "/"). I tried this approach and it works
x/y <!-- x/y on one line -->
The entity is a zero-width word joiner, similar to , but without space.
However, I am concerned about a slightly more complex example:
x/<span class="someclass"></span>
with style:
.someclass { content: "y"; }
This seems to work in Firefox (no linebreaks between normal and generated content), but in Opera, it fails. Should this work according to the standards?
Set white-space: nowrap; as seen here: webdesignerwall.com
Simply setting the br element to display none worked for me on Chrome. I'm not sure about FF, IE, and the like, but it shouldn't be too hard to check!
.someclass br { display: none; }
Sometimes when a piece of data in one of my table cells is too long it stretches the cell and deforms the layout of the entire table. how can i prevent this?
You probably want table-layout:fixed and set width on the first cells of a row.
See http://www.w3.org/TR/CSS2/tables.html#fixed-table-layout for detailed explanation.
I just had the same problem and ended up solving it with this:
table { width: 1px; /* This ugly hack allows the table to be only as wide as necessary, breaking text on spaces to allow cells to be less wide. */ }
Apparently, setting the table width to something very small forces it to break text up and take less horizontal space. Words will not be broken though, so the table will end up being at least large enough for the largest word of each column.
Tried tested and true on:
Linux (Ubuntu 10.04)
Firefox 3.6.18
Chromium-browser 12.0.742.112 (90304) whatever all that means
Konqueror 4.5.3
SeaMonkey 2.0.11
Windows:
Internet Explorer 7
Firefox 4.0.1
If someone (I can't in my present situation) could test this on latest versions of IE, Firefox, Chrome, Safari and Opera and leave a comment or edit this answer, that would be awesome!
Assuming you don't have any non-breaking spaces or super-long text without a space in the cell, I've usually had the best luck by explicitly setting the width of said cell via CSS (seems to work better than doing something like "width='100'". If the data in the cell is just a really long string, there's not much you can do other than truncate it programatically, or wrap the data in a div with an explicit width and something like overflow: hidden / auto (auto if you want a horizontal scrollbar or something).
Set the width and height of the td tag using CSS. Then you need to deal with overflow.
td {
width: 40px;
height: 20px;
}
Use overflow: hidden to hide the overflow as such:
td, th {
overflow: hidden;
}
For this to work, your <td> or <th> tags needs to be assigned a width.
If you must absolutely have the table maintain it's layout even in the face of non-breaking spaces, then you'll need to use:
overflow: hidden;
However, I'd recommend against it. IMO, it's more important to have the data readable than the layout perfect.