If I have a very long string (without spaces!). Can I force the browser to line break it, for example, in a table's td via CSS. Width does not seem to have any effect.
Note: I know it is very unlikely for someone to submit a long string without spaces but you never know ...
I tried:
.gridrow td
{
padding: 1em;
text-align: center;
word-wrap: break-word;
}
and I use FF as my browser. word-wrap only seems to be used in CSS3?
I think what you mean is in CSS:
#id
{
max-width: 100px; /*or whatever*/
word-wrap: break-word;
}
Tested on your site with Firebug, it works.
Reference article.
Tables are a special case. They'll keep on expanding if they can, so as not to obscure any content; you can't use overflow: hidden on them either. Here are some options:
Use an optional breaking character. (Source: http://www.quirksmode.org/oddsandends/wbr.html ) If you can control insert a character like or <wbr> programatically into long strings, this may be a solution.
Perhaps preferably, depending on your situation, you can limit the table to use strict widths, at which point it should obey your rule:
table {
table-layout: fixed;
width: 100%;
}
table td {
word-wrap: break-word; /* All browsers since IE 5.5+ */
overflow-wrap: break-word; /* Renamed property in CSS3 draft spec */
}
i think there wordwrap element. search for the wordwrap.
word-wrap: break word
EDITED
REF Word-wrap in a html table
it suggest that there's no good way of doing this.
Related
I wonder if its possible to control the typography when using wordpress? For example, if a word doesn't fit in the row, it gets hyphenated and doesn't jump to the other row.
The customer I am doing a website for wants the words that doesn't fit in the row to get hyphenated.
Update:
p { hyphens: auto; margin-bottom:24px; font-family:candara,arial,sans-serif; color: #000000; font-weight: 300; }
The hyphens: auto;, didnt work
It sounds like you may have tried something along these lines already, but CSS Tricks gives a more thorough explanation of how the hyphens property is language-dependent. Different languages have different default behaviors for hyphens. Also browser support for the hyphens property is a little spotty, with Chrome only supporting the "none" value.
I found a good answer to this question here:
https://justmarkup.com/log/2015/07/dealing-with-long-words-in-css/
.hyphenate {
overflow-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
In my webpage I have a div with fixed width and using the following css:
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
The ellipsis is working, the problem is that it cuts the final word, and I wanted it to put the ellipsis (...) in the final of a full word.
For instance, if I have the text: "stackoverflow is the best", and if it need to be cutted near the end, I want it to display "stackoverflow is the ..." instead of "stackoverflow is the be..."
I’m afraid it’s impossible. There was once text-overflow: ellipsis-word, which would do just this, but it was not implemented in browsers and it was removed from CSS3 drafts.
Of course it's possible. (If you're willing to change your markup a bit.)
https://jsfiddle.net/warphLcr/
<style>
.foo {
/* Make it easy to see where the cutoff point is */
border: 2px solid #999;
padding-right: 18px; /* Always have room for an ellipsis */
width: 120px;
height: 1.1em; /* Only allow one line of text */
overflow: hidden; /* Hide all the text below that line */
background-color: #fff; /* Background color is required */
}
.foo > span {
display: inline-block; /* These have to be inline block to wrap correctly */
position: relative; /* Give the ellipsis an anchor point so it's positioned after the word */
background-color: #fff; /* Cover the ellipsis of the previous word with the same background color */
white-space: pre; /* Make sure the only point where wrapping is allowed is after a whole word */
}
.foo > span:after {
position: absolute; /* Take the ellipsis out of the flow, so the next item will cover it */
content: "…"; /* Each span has an ellipsis */
}
.foo > span:last-child:after {
content: ""; /* Except for the last one */
}
</style>
<div class="foo">
<!-- These *must not* have white space between them, or it will collapse to a space before the next word, and the ellipsis will become visible -->
<span>stackoverflow</span><span> is</span><span> the</span><span> best</span>
</div>
There's a jQuery plugin that does this, called dotdotdot.
It also works for multi-line text, and adapts responsively if the text reflows e.g. if the screen size changes. It also includes smart truncation of pathnames e.g. http://example.com/some/long/.../path.html
Be aware of the possibility of width-based timing issues in cases where the width changes or becomes unavailable in ways the plugin might not expect, such as if the text is initially hidden or if it changes font (e.g. loading web fonts on some browsers). Might require re-applying or being applied after such changes.
But 99% of the time, the plugin seems fast and robust.
If you want to display one line of text that would end in ellipsis, like a news ticker for example, just do:
p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
I went to Settings > Edit Theme > Advanced and added this to it, under <style type="text/css">, but it doesn't work:
pre { overflow: auto; }
code { background-color: LightGrey; padding: 1px 3px; }
The first statement doesn't take effect when accessed with Chromium (I expect a horizontal scroll to appear). The second one, which I added for demonstration purposes, works well.
Here's the page you can look at to see how well it doesn't work.
I've tested with these browsers:
Chromium and Epiphany works not
Firefox and Konqueror works
update:
Following a suggestion, I've tried all these whitespace properties inside the <pre> tag: normal, nowrap, pre, pre-line, and pre-wrap. The problem remains.
If you float .code left then it will work:
.code {float: left;}
pre { white-space: pre;}
To have a horizontal scroll bar show up, you need to add:
pre { white-space: nowrap; }
On the actual page you have the css:
pre { overflow: auto; white-space: pre-line; }
This is overwriting any other white-space declaration and therefore it will not have horizontal scroll. Changing this to white-space: nowrap fixes the problem.
I've used:
word-break:break-all;
table-layout:fixed;
and the text wraps in Chrome but not Firefox.
Update: I decided to change the design so it didn't need the wrap; trying to sort out a CSS fix/hack was proving too frustrating and time consuming.
Try this, I think this will work for something like "AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGG"
will produce
AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G
I have taken my example from a couple different websites on Google. I have tested this on ff 5.0, IE 8.0, and Chrome 10.
.wrapword {
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -webkit-pre-wrap; /* Chrome & Safari */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
word-break: break-all;
white-space: normal;
}
<table style="table-layout:fixed; width:400px">
<tr>
<td class="wrapword">
</td>
</tr>
</table>
Here is advanced version of what OP asked.
Sometimes, what happens is that, our client wants us to give '-' after word break to end of line.
Like
AAAAAAAAAAAAAAAAAAAAAAABBBBBBBBBBB
break to
AAAAAAAAAAAAAAAAAAAAAAA-
BBBBBBBBB
So, there is new CSS property if supported, usually supported in latest browsers.
.dont-break-out {
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;
/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
I am using this one.
I hope somebody will have demand like this.
For an automatic table layout try to style the concerned td combining the attributes max-width and word-wrap.
Eg: <td style="max-width:175px; word-wrap:break-word;"> ... </td>
Tested in Firefox 32, Chrome 37 and IE11.
You can manually inject zero width spaces () to create break points.
Set a column width for the td tag.
What worked for me was:
.output {
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
}
I think this is a long standing issue in Firefox, that harks back to Mozilla and Netscape. I'll bet you were having the issue with the display of long URLs. I think it is an issue with the rendering engine rather than something you can fix with CSS, without some ugly hacks.
Makes sense to change the design.
This looked hopeful though: http://hacks.mozilla.org/2009/06/word-wrap/
I'm using Angular for my project, and managed to solve this with a simple filter:
Template:
<td>{{string | wordBreak}}</td>
Filter:
app.filter('wordBreak', function() {
return function(string) {
return string.replace(/(.{1})/g, '$1');
}
})
You can't see it, but after $1 there is an invisible space (thanks #kingjeffrey for the tip), which enabled word breaks for table cells.
One slightly hackish way of doing this is by processing the text to add space between each letter. Replace spaces with Then use the letter-spacing css attribute to bring the spaces down.
I know, it's a hack... but if NOTHING else works, it should wrap without problem.
In the following page http://ada.kiexpro.com/test2/map.html
I added:
white-space: normal;
to wrap the copyright text that is coming our from the Google map API.
It works in FF and IE but Chrome seems to ignore the CSS selector:
global.css:
#cm_map span {
white-space: normal !important;
}
Google has an anonymous div with inline styles surrounding the copyright content. Only hook I can see is that it's a sibling of the "logocontrol" div. To override, try something like the following:
#cm_map #logocontrol + div[style] {
left: auto !important;
line-height: 13px;
right: 5px;
bottom: 6px !important;
white-space: normal;
width: 95%;
}
Not thoroughly tested but something like this should work.
This may also be a bug in Chrome: white-space normal !important doesn't override nowrap.
I've reported this bug at http://code.google.com/p/chromium/issues/detail?id=89573, but based on how they have been completely ignoring a more important issue since 2009, I have little hope of this being fixed.
Here is another example of chrome ignoring the important. This time its on the position. Unclicking the "position: relative" does bring the absolute into the picture. So the style is valid.