So I've been banging my head against a wall trying to figure this issue out with Chrome and how it has a hard time wrapping long URLs in a table cell. I have seen a lot of questions regarding word wrapping and some even had with long URLs but none of them worked for me. So essentially, I tried putting in the td
word-wrap:break-word;
but this doesn't wrap the long URL which is (changed here, doesn't go to anything):
https://differentName/api/?REQUEST=%3C%3Fxml%20version%3D%271.0%27%20%3F%3E%3Cnta%3E%3Capi%20version%3D%271.0%27%3E%woot%20function%3D%22login%22%3E%3Clogin%3E%3C!%5BCDATA%5Bjpublic%something.com%5D%5D%3E%3C%2Flogin%3E%3Cpassword%3E%3C!%5BCDATA%5Bnta46550%5D%5D%3E%3C%2F
I've tried adding a width property onto the td but I get nothing. I was also told that when using the word-wrap property to also include:
table-layout:fixed;
But I don't want my columns fixed in width. Also, I don't have the wrapping issue if I use the fixed property. I'm working off of the latest version of Chrome (as of this date). No issues with FF 26.0 or IE 11. Any help would be great.
I would just establish a class on the td that you are having the issue with.
In its current state, you are only breaking when spaces are present.
If you want to force breaks without spaces in Chrome as well, you can use the CSS word-break: break-all;
Does something like this work for you?
http://jsfiddle.net/qqsj8/2/
CSS:
td.break {
/* Be VERY careful with this, breaks normal words wh_erever */
word-break: break-all;
}
HTML:
<td class="break">Why do...</td>
Related
Take a long continuous string of text like so:
Question?Thisisanissuewithusingquestionmarks
In all versions of IE, the line breaks unexpectedly after the question mark. In IE9+ this is countered by using white-space: pre;, but IE8 seems to ignore it (even though it's supported). The only way I've been able to get this to wrap as normal (i.e. not line break at the question mark) is by using a mono-spaced font, but this also extends the length of the textarea. Any ideas?
To summarize: I want a HTML/CSS solution to having the line not break on to a new line after the ? mark in IE8.
Fiddle: https://jsfiddle.net/8m5yea9y/
Example of how it's working fine in IE9+ using white-space: pre;
Adding word-break: break-all; to your css for the textarea should cause the line to break as desired. You may also need to add word-wrap: break-word;.
Added Screenshot: Tested and works in IE8 on windows XP.
I am working with a legacy html code which uses tables extensively for layout. For the page I'm making I unfortunately have to call one of these legacy systems which returns the output in table with multiple tr's.
I got it to align on the same line in both Firefox/Chrome by using
display: inline;
float: left;
But it still doesn't work in IE9 (I haven't tested with other versions of IE). Is there anything to force IE to display both <tr> elements on the same line?
I would try
display:inline-block;
Untested
You might also consider using javascript to manipulate the elements once the DOM is rendered.
EDIT
The other thing you might do is set a specific width on the trs. IE9 might be giving them a default 100%, so less than 50% each if there are two of them, etc.
I have an HTML table 360px wide, which works great. The challenge is that sometimes a url appears http://this/is/a/really-really-really-really-really/long/url in the text. This causes the table to expand horizontally and a scroll bar appears on the bottom.
I don't think overflow:hidden will work because half of the text would be hidden.
What is the best way to force breaking the line on slashes (/) and dashes (-) in CSS (hopefully)?
It should work with IE7+, Chrome, Firefox and Safari.
Working in Rails 3 and jQuery.
tl;dr; (edited Apr 2022)
Use <wbr> word-break-opportunity element before each /. See first link in further reading below.
Details (original from 2014)
While the css word-wrap: break-word; does work, its implementation is different across browsers.
If you have control of the content and want exact breakpoints, you can insert
a <wbr> word break (supported in all major browsers except IE8 CanIUse.com);
zero-width space (U+200B) - ugly in IE<=6
soft hyphen - though of course this adds a hyphen when breaking which is not always what is desired.
I have a large corporate user base who still have to use IE8, so when I hit this problem I used the C# someString.Replace("/", "/") in the server-side code.
Gotcha: If you insert a zero-width space in an email address, when a user copies and pastes into their email client, the space gets copied too and the email will fail with no way for a user to see why (the space is zero width ...)
References
Stack Overflow
http://www.quirksmode.org/oddsandends/wbr.html - with examples
Further Reading
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr#example
https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
https://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/ (March 2012)
https://css-tricks.com/almanac/properties/w/word-break/ (Sep 2012)
https://css-tricks.com/almanac/properties/h/hyphenate/ (Sep 2011)
You can use word-wrap : break-word; like so:
div {
width : 50px;
border : 1px solid #000;
word-wrap : break-word;
}
<div>http://www.aaa.com/bbb/ccc/ddd/eee/fff/ggg</div>
I tested this in: I.E. 6/7/8, Firefox 7, Opera 11, Safari 5, Chrome 15
Here is a jsfiddle: https://jsfiddle.net/p4SxG/
If you don’t really care where the breaks happen, the simplest method is to add the style overflow-wrap: break-word;. This will allow long words to break without affecting the breaking of other words.
But if you want to break at specific characters, such as the slash character, you can’t do that with CSS, you have to do it in HTML. If you have access to the HTML code you can choose any of these solutions:
<wbr> word break opportunity tag
zero width space
​ zero width space
But you don’t always have access to the HTML code. Some web applications won’t allow you to enter code into certain fields; for example, WordPress will filter out any code you enter into a post title. In these situations you may be able to insert a zero-width-space character directly. One way to do this is to use Character Viewer (Mac) or Character Map (Windows), although of course they are a bit tricky to use when it comes to spaces because spaces are invisible. In the case of Character Viewer, when you search for arrow, lots of matches appear, but when you search for zero width space, it appears that no characters were found. But if you click where the blue square is in the second image below, you’ll discover that the character was found, it’s just invisible.
A snippet to demonstrate that these various methods all work:
h1 {
width: 15rem;
border: 1px solid black;
}
.b {
overflow-wrap: break-word;
}
A title which is too long
<h1>Seminars/Workshops</h1>
Breaking with CSS
<h1 class="b">Seminars/Workshops</h1>
Breaking with HTML: code-based solutions
<h1>Seminars<wbr>/<wbr>Workshops</h1>
<h1>Seminars/Workshops</h1>
<h1>Seminars​/​Workshops</h1>
Breaking with HTML: character-based solution
<h1>Seminars/Workshops</h1>
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.