Wrap text on space and slash

Question

I have a div/textarea field where I want to wrap the data on 50 characters without breaking the word. The text contained in the element will be a path which can contain alphanum, spaces and slashes. I want it to be wrapped at spaces and slashes. Is this feasible with css only without requiring any js to perform this action

I have used

<textarea cols=50 style="border:none;font-family: Verdana, sans-serif; color: #333;">document vault/12345678901234567890123456789012345678901234567890/asdasd 22</textarea>

this should appear as(expected)

document vault/
12345678901234567890123456789012345678901234567890
/asdasd 22

updated the question. I have tried using textarea for space wrapping but didnt find anything for wrapping on slash — Varun, Dec 29 '16 at 05:39
Possible duplicate of [Cause line to wrap to new line after 100 characters](http://stackoverflow.com/questions/16754608/cause-line-to-wrap-to-new-line-after-100-characters) — aavrug, Dec 29 '16 at 05:42
@aavrug - i dont want word break here. have already tried it — Varun, Dec 29 '16 at 05:42
`font-family:monospace; overflow: hidden;` is the closest but `cols` has to be `46` with the system I'm on and it wraps at `` and `-` naturally as the default browser behavior. I don't think `/` is possible without some JavaScript. http://stackoverflow.com/questions/5011756/what-characters-will-a-textarea-wrap-at-other-than-spaces — tresf, Dec 29 '16 at 05:50
Another trick seems to be adding a zero-width space after the slashes. Not a `CSS` solution, but certainly doesn't require any JS. :) WARNING: Copy/paste to a terminal shows this as a full space, so I would recommend using it for display only (not if copying/pasting TextArea content elsewhere) http://stackoverflow.com/a/16279315/3196753 — tresf, Dec 29 '16 at 05:58
@QZSupport - it does looks promising though we cannot have a fixed width here for 50 characters — Varun, Dec 29 '16 at 06:06
@Varun can you elaborate? Do you mean the `TextArea` must display as wider than 50 characters, yet still break on 50 characters? — tresf, Dec 29 '16 at 06:09
i actually want the row to have a maximum of 50 characters and wrap without breaking the word. I guess i need CSS + JS for this trying one solution will update if it works — Varun, Dec 29 '16 at 06:24

score 0 · Answer 1 · answered Dec 29 '16 at 05:53

0

Try this css property with the text line you want alphanumerics to be in a single line .

white-space: nowrap;

answered Dec 29 '16 at 05:53

Suhail Akhtar

1,718
15
29

score 0 · Accepted Answer · answered Dec 29 '16 at 06:59

0

Used width:50ch and replaced all \ with \ this helped. thanks all for your suggestions. Special thanks to QZSupport

a=a.replace(/\\/g, "&#x200b;\\&#x200b;");

answered Dec 29 '16 at 06:59

Varun

5,001
12
54
85

Wrap text on space and slash

2 Answers2