In the following table, how do I align the data in td cells such that we do not get a horizontal scroll bar, using CSS?
Also the requirement is that the height of the table should be adjusted automatically..
<table>
<tr><th>name</th>
<th>info</th></tr>
<tr><td>Harry</td>
<td>suminfosuminfosuminfosuminfosum infosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfos uminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfo<td></tr>
<tr><td>test</td><td>test data</td></tr>
</table>
The extra long cell needs word-wrap:break-word.
Try:
table {
table-layout: fixed;
word-wrap: break-word;
width: 600px; /* or whatever you like */
}
To support all browser go for this
.workbreak {
word-wrap: break-word; /* IE 5.5-7 */
white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
white-space: pre-wrap; /* current browsers */
}
<table>
<tr><th>name</th>
<th>info</th></tr>
<tr><td>Harry</td>
<td class="workbreak">suminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfo<td></tr>
<tr><td>test</td><td>test data</td></tr>
</table>
For more detail : https://developer.mozilla.org/en/CSS/white-space
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I have table with fixed width. When there is some space it transfers to new line, but sometimes one word is too long and it steps to another div. I want to hide this part of text.
You can try the following solution:
.truncate-text {
height: 20px;
width: 20px;
border: 1px solid black;
overflow: hidden;
/*
Use (if you want to truncate the text with three dots):
text-overflow: ellipsis;
*/
}
<div class="truncate-text">
longlonglonglongword
</div>
Here, out of all the CSS properties used for the class truncate-text, two are important, i.e., overflow: hidden and text-overflow: ellipsis.
Here is the link to the fiddle where is works fine.
Also here are a few references:
overflow CSS property
text-overflow CSS property
I hope this is helpful enough.
This will wrap your text within the div, even if your string is unbroken (which is what I assume you mean).
.wordwrap {
white-space: pre-wrap; /* Webkit */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap; /* Opera <7 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* IE */
}
The problem is that you have a very long word. You can do as they said, with word-wrap: break-word; or you can hide the text.
You can use text-overflow, i.e:
p {
text-overflow: ellipsis;
}
Where:
text-overflow: clip|ellipsis|string;
You can try below code
table td {
width: 15px;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
}
table td:hover {
overflow: visible;
}
<table border='1px' style="table-layout:fixed; width:20px;">
<tr>
<td>ddddsssssssssssssss</td>
</tr>
</table>
It will also help to see hidden text when you hover it.
I have a long string (a DNA sequence). It does not contain any whitespace character.
For example:
ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA
What would be the CSS selector to force this text to be wrapped in a html:textarea or in a xul:textbox?
for block elements:
<textarea style="width:100px; word-wrap:break-word;">
ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTC
</textarea>
for inline elements:
<span style="width:100px; word-wrap:break-word; display:inline-block;">
ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTC
</span>
Place zero-width spaces at the points where you want to allow breaks. The zero-width space is in HTML. For example:
ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGC
Here are some very useful answers:
How to prevent long words from breaking my div?
to save you time, this can be solved with css:
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
word-break: break-all;
For me this works,
<td width="170px" style="word-wrap:break-word;">
<div style="width:140px;overflow:auto">
LONGTEXTGOESHERELONGDIVGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESHERELONGDIVLONGTEXTLONGTEXT
</div>
</td>
You can also use a div inside another div instead of td. I used overflow:auto, as it shows all the text both in my Opera and IE browsers.
I don't think you can do this with CSS. Instead, at regular 'word lengths' along the string, insert an HTML soft-hyphen:
ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATG
This will display a hyphen at the end of the line, where it wraps, which may or may not be what you want.
Note Safari seems to wrap the long string in a <textarea> anyway, unlike Firefox.
Use a CSS method to force wrap a string that has no white-spaces. Three methods:
1) Use the CSS white-space property. To cover browser inconsistencies, you have to declare it several ways. So just put your looooong string into some block level element (e.g., div, pre, p) and give that element the following css:
some_block_level_tag {
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP Printers */
word-wrap: break-word; /* IE 5+ */
}
2) use the force-wrap mixin from Compass.
3) I was just looking into this as well and I think might also work (but I need to test browser support more completely):
.break-me {
word-wrap: break-word;
overflow-wrap: break-word;
}
Reference: wrapping content
My way to go (when there is no appropiate way to insert special chars) via CSS:
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
As found here: http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
with some additional research to be found there.
For word-wrap:break-word; to work for me, I had to make sure the display was set to block, and that the width was set on the element. In Safari, it had to have a p tag and the width had to be set in ex.
Use <wbr>tag:
ACTGATCG<wbr>AGCTGAAG<wbr>CGCAGTGC<wbr>GATGCTTC<wbr>GATGATGC
I think this is better than using zero-width space which could cause problems when you copy the text.
If you're using PHP then the wordwrap function works well for this:
http://php.net/manual/en/function.wordwrap.php
The CSS solution word-wrap: break-word; does not seem to be consistent across all browsers.
Other server-side languages have similar functions - or can be hand built.
Here's how the the PHP wordwrap function works:
$string = "ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA";
$wrappedstring = wordwrap($string,50,"<br>",true);
This wraps the string at 50 characters with a <br> tag. The 'true' parameter forces the string to be cut.
<textarea style="width:100px; word-wrap:break-word;">
place your text here
</textarea>
In a case where the table isnt of fixed size, below line worked for me:
style="width:110px; word-break: break-all;"
In case if you use Bootstrap, better case for you is use this class "text-break".
Example:
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
More informationg you should get in official Bootstrap documentation page
Simply:
word-break: break-word;
just setting width and adding float worked for me :-)
width:100%;
float:left;
Here is the code I come into using white-space: pre-wrap;
.code {
width: 90vw;
white-space: pre-wrap;
font-family: inherit;
word-break: break-word;
overflow-wrap: break-word;
line-break: auto;
}
I know the with value is looks odd,you should change it to value fits your needs .
I tried to wrap a single word which contains around 500+ chars in a div.
<table><tr><td style="width: 100px;" colspan=""><div class="wordwrap"><p>
dwhjifuidfinrnvfrvgjsrfjoejwofjjfpijqfpqejospjfcjcdefjipwejpfjespfjweokpwoefweeeepWSPgjwrqeo[fj[ejwo[jfqjfo[cfj[e[awfjw[fw[ofj[sejfpjwerpjfpwrjgjrjghyhefdjsjflkfasjgfiosdjfgsfgsdfiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiigrwewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewettttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttu
</p></div> </td></tr></table>
with this solution provided In Is there a way to word-wrap long words in a div?
<style type="text/css">
.wordwrap {
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap; /* Opera <7 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* IE */
}
</style>
But it is not working.
Followed this Is there any way to wrap html text when 'all one word' is used? also .
What could be the problem?
Because your long word is within a <table> - you need to add table-layout: fixed;
table {
width: 100%;
word-wrap:break-word;
table-layout: fixed;
}
table {
width: 100%;
word-wrap:break-word;
table-layout: fixed;
}
<table ><tr><td style="width: 100px;" colspan=""><div class="wordwrap"><p>
dwhjifuidfinrnvfrvgjsrfjoejwofjjfpijqfpqejospjfcjcdefjipwejpfjespfjweokpwoefweeeepWSPgjwrqeo[fj[ejwo[jfqjfo[cfj[e[awfjw[fw[ofj[sejfpjwerpjfpwrjgjrjghyhefdjsjflkfasjgfiosdjfgsfgsdfiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiigrwewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewettttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttu
</p></div> </td></tr></table>
FIDDLE
Explanation:
The default value for table-layout is auto which means that the browser will decide the width of a column based on the content of the table cells.
In this case, the table layout algorithm will look at that really long word and say: 'heck, i'll need a really wide column to fit that word in'
By setting table-layout to fixed - The browser determines the width of the columns based on the width of the cells in the first row without taking into account the amount of content present in other rows. (See MDN)
Here, there is one row with one cell - so table-layout: fixed says: make that cell the width of the entire table! (was has width: 100%)
NB: For table-layout: fixed to take effect, the width of the table must be set (with a value other than auto)
For more details about table-layout - See this article
word-wrap: break-word should give you the result you’re after.
Here is the code you should use:
.wrapword {
width: 200px;
-ms-word-break: break-all;
word-break: break-all;
white-space: pre-wrap
}
<div class="wrapword">
dswfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfug
</div>
You've also got HTML5's <wbr> tag: http://www.quackit.com/html_5/tags/html_wbr_tag.cfm which lets you specify suitable break points
dwhjifuidfinrnvfrvgjsrfjoejwofjjfpijqfpqej<wbr>ospjfcjcdefjipwejpfjespfjweokpwoefweeeepWSPgjwrqeo
It might not be what you want, but it's worth playing around with
There is property in css:
.selector {
word-wrap: normal|break-word;
}
Try add some overflow - hidden, scroll, auto ...
.wordwrap {
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap; /* Opera <7 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* IE */
overflow:hidden;
}
Also your Followed answer contains oveflow: scroll;
Try this. It worked for me.
<html>
<head></head>
<body>
<div style="width:200px;">
<span style="width:100%;table-layout:fixed;word-wrap:break-word;display:inline-table">
hadfskldfjsdjlfjlsdkflkdsfsdrfsdfsdfsfsdfsdfsdfsdfsdfsd
</span>
<div>
</body>
</html>
I have a div, and inside that div is a link
<div class="something">
Databases
</div>
The problem is that when I set the width of my div, smaller then the width that the text of the link is. the text of the link just goes outside of the parent div.
What I want is that the text breaks to a new line.
How can I fix this ?
Use the CSS word-break rule.
a {
word-break:break-all;
}
jsFiddle example
Try this
a{
white-space: pre-wrap;
word-wrap: break-word;
}
JsFiddle Demo
You should use the word-break property on the anchor <a> tag.
a{
word-break: break-all;
}
As this documentation explains, this will work since
In addition to ‘normal’ soft wrap opportunities, lines may break between any two letters (except where forbidden by the ‘line-break’ property). Hyphenation is not applied.
This will force the word to split whenever the text reaches the boundary of the container, breaking onto a new line.
You can use CSS to tell the browser to break the word down as it would multiple words:
.something{word-wrap: break-word;}
.something a {
/* see http://stackoverflow.com/a/7256972/315935 for details */
word-wrap: break-word; /* IE 5.5+ and CSS3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 */
overflow: hidden;
height: auto !important;
vertical-align: middle;
}
I tried to wrap a single word which contains around 500+ chars in a div.
<table><tr><td style="width: 100px;" colspan=""><div class="wordwrap"><p>
dwhjifuidfinrnvfrvgjsrfjoejwofjjfpijqfpqejospjfcjcdefjipwejpfjespfjweokpwoefweeeepWSPgjwrqeo[fj[ejwo[jfqjfo[cfj[e[awfjw[fw[ofj[sejfpjwerpjfpwrjgjrjghyhefdjsjflkfasjgfiosdjfgsfgsdfiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiigrwewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewettttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttu
</p></div> </td></tr></table>
with this solution provided In Is there a way to word-wrap long words in a div?
<style type="text/css">
.wordwrap {
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap; /* Opera <7 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* IE */
}
</style>
But it is not working.
Followed this Is there any way to wrap html text when 'all one word' is used? also .
What could be the problem?
Because your long word is within a <table> - you need to add table-layout: fixed;
table {
width: 100%;
word-wrap:break-word;
table-layout: fixed;
}
table {
width: 100%;
word-wrap:break-word;
table-layout: fixed;
}
<table ><tr><td style="width: 100px;" colspan=""><div class="wordwrap"><p>
dwhjifuidfinrnvfrvgjsrfjoejwofjjfpijqfpqejospjfcjcdefjipwejpfjespfjweokpwoefweeeepWSPgjwrqeo[fj[ejwo[jfqjfo[cfj[e[awfjw[fw[ofj[sejfpjwerpjfpwrjgjrjghyhefdjsjflkfasjgfiosdjfgsfgsdfiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiigrwewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewettttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttu
</p></div> </td></tr></table>
FIDDLE
Explanation:
The default value for table-layout is auto which means that the browser will decide the width of a column based on the content of the table cells.
In this case, the table layout algorithm will look at that really long word and say: 'heck, i'll need a really wide column to fit that word in'
By setting table-layout to fixed - The browser determines the width of the columns based on the width of the cells in the first row without taking into account the amount of content present in other rows. (See MDN)
Here, there is one row with one cell - so table-layout: fixed says: make that cell the width of the entire table! (was has width: 100%)
NB: For table-layout: fixed to take effect, the width of the table must be set (with a value other than auto)
For more details about table-layout - See this article
word-wrap: break-word should give you the result you’re after.
Here is the code you should use:
.wrapword {
width: 200px;
-ms-word-break: break-all;
word-break: break-all;
white-space: pre-wrap
}
<div class="wrapword">
dswfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfug
</div>
You've also got HTML5's <wbr> tag: http://www.quackit.com/html_5/tags/html_wbr_tag.cfm which lets you specify suitable break points
dwhjifuidfinrnvfrvgjsrfjoejwofjjfpijqfpqej<wbr>ospjfcjcdefjipwejpfjespfjweokpwoefweeeepWSPgjwrqeo
It might not be what you want, but it's worth playing around with
There is property in css:
.selector {
word-wrap: normal|break-word;
}
Try add some overflow - hidden, scroll, auto ...
.wordwrap {
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap; /* Opera <7 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* IE */
overflow:hidden;
}
Also your Followed answer contains oveflow: scroll;
Try this. It worked for me.
<html>
<head></head>
<body>
<div style="width:200px;">
<span style="width:100%;table-layout:fixed;word-wrap:break-word;display:inline-table">
hadfskldfjsdjlfjlsdkflkdsfsdrfsdfsdfsfsdfsdfsdfsdfsdfsd
</span>
<div>
</body>
</html>