views:

1553

answers:

5

I have a long string (a DNA sequence). It does not contain any whitespace character. e.g.: ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

what would be the css selector to force this text to be wrapped in an html:textarea or in a xul:textbox

Thanks.

+1  A: 
<textarea style="border:1px solid red; width:100px;word-wrap:break-word;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</textarea>
heeen
Thanks but I'm afraid it doesn't work (tested with FF3)
Pierre
It's supported only in IE, Safari, and FF3.1 (alpha).
Adam Bellaire
have you tried the cols attribute (non-css)?
heeen
just tested your solution with the last FF . Worked fine.
Pierre
+3  A: 

I don't think you can do this with CSS. Instead, at regular 'word lengths' along the string, insert an HTML soft-hyphen:

ACTGATCG&shy;AGCTGAAG&shy;CGCAGTGC&shy;GATGCTTC&shy;GATGATGC&shy;TGACGATG

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.

Peter Hilton
Wow, didn't even know about that. Neat!
Daniel Schaffer
+4  A: 

Place zero-width spaces at the points where you want to allow breaks. The zero-width space is &#8203; in HTML. For example:

ACTGATCG&#8203;AGCTGAAG&#8203;CGCAGTGC&#8203;GATGCTTC&#8203;GATGATGC

Remy Blank
+2  A: 

For me this works,

<td width="170px" style="word-wrap:break-word;">

<div style="width:140px;overflow:auto">

LONGTEXTGOESHERELONGDIVGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESHERELONGDIVLONGTEXTLONGTEXT

</div></td>

You can otherwise also use div inside div and remove td here. I used overflow as auto, as it shows compatiblily to show all the text both in My OPERA and IE browsers.

Hope it Helps someone

Anita

Rani
A: 

For CSS, Here is webmaster example in comments last

http://fun2mobo.awardspace.biz

Works I.e. n Opera and others too check pls

I use overflow:auto and word-wrap:break-word css, overflow aut does display content in all browsers with div having width by style or normally.

Sunny