Text wrap html link

How do I automatically wrap text URLs in anchor tags?

I have a simple CMS I built for a client of mine. This issue is, instead of him posting links probably through anchor tags, he just copies and pastes it straight into the text editor. Is there a way that these links can be wrapped in an anchor tag using JavaScript? So when the page loads instead of it looking link this:

Stack Overflow actually does this when a user posts a URL to an answer/question (if that helps understand what I am trying to achieve).

I am not quite sure where to start. I read one post here, but it seems to affect URLs within script tags and embedded tags.

1 Answer 1

You could try something along these lines. Decorate the tags where you want these replacements to take effect with a custom attribute like data-linkify :

something http://google.com something
something
 

Now perform replacements inside any element with data-linkify set.

There are some caveats. This isn’t a great regex at all — it simply matches anything starting with http:// or https:// up until the first whitespace character. Look for a better URL matching regex.

Also, the use of replace against .html() means that it will break any existing links that happen to fall under your data-linkify elements! If there happen to be doublequote characters in your textual links, it will create broken anchor elements.

You might consider a very simple markup of some sort to identify links — it would be much better than guessing.

Источник

text-wrap

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The text-wrap CSS property controls how text inside an element is wrapped. The different values provide:

• Typographic improvements, for example more balanced line lengths across broken headings
• A way to turn text wrapping off completely.

Note: The white-space-collapse and text-wrap properties can be declared together using the white-space shorthand property.

Syntax

/* Keyword values */ text-wrap: wrap; text-wrap: nowrap; text-wrap: balance; /* Global values */ text-wrap: inherit; text-wrap: initial; text-wrap: revert; text-wrap: revert-layer; text-wrap: unset; 

The text-wrap property is specified as a single keyword chosen from the list of values below.

Values

Text is wrapped across lines at appropriate characters (for example spaces, in languages like English that use space separators) to minimize overflow. This is the default value.

Text does not wrap across lines. It will overflow its containing element rather than breaking onto a new line.

Text is wrapped in a way that best balances the number of characters on each line, enhancing layout quality and legibility. Because counting characters and balancing them across multiple lines is computationally expensive, this value is only supported for blocks of text spanning a limited number of lines (the Chromium implementation uses four wrapped lines or less), meaning that it is useful for cases such as headings or pull quotes.

Formal definition

Formal syntax

text-wrap =
wrap |
nowrap |
balance |
stable |
pretty

Examples

Basic text wrap value comparison

HTML

h2 class="wrap" contenteditable="true"> The default behavior; the text in the heading wraps "normally" h2> h2 class="nowrap" contenteditable="true"> In this case the text in the heading doesn't wrap, and overflows the container h2> h2 class="balance" contenteditable="true"> In this case the text in the heading is nicely balanced across lines h2> 

CSS

.wrap  text-wrap: wrap; > .nowrap  text-wrap: nowrap; > .balance  text-wrap: balance; > h2  font-size: 2rem; font-family: sans-serif; > 

Result

The text in the example is editable. Change the text, adding long words, to view how the different line and word lengths impact wrapping.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 12, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)

There are times when a really long string of text can overflow the container of a layout. For example: Here’s a big snippet with all the CSS players involved:

That would fix the issue for us: Here’s the scoop:

• overflow-wrap: break-word; makes sure the long string will wrap and not bust out of the container. You might as well use word-wrap as well because as the spec says, they are literally just alternate names for each other. Some browsers support one and not the other. Firefox (tested v43) only supports word-wrap . Blink (tested Chrome v45) will take either one.
• With overflow-wrap in use all by itself, words will break kinda anywhere they need to. If there is an “acceptable break” character (like a literal dash, for instance), it will break there, otherwise it just does what it needs to do.
• You might as well use hyphens as well, because then it will try to tastefully add a hyphen where it breaks if the browser supports it (Blink doesn’t at time of writing, Firefox does).
• word-break: break-all; is to tell the browser that it’s OK to break the word wherever it needs to. Even though it kinda does that anyway so I’m not sure in what cases it’s 100% necessary.

If you want be more manual with hyphens, you can suggest them in your markup. See more on the MDN page.

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Mobile / Tablet

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Mobile / Tablet

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Mobile / Tablet

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Mobile / Tablet

Preventing Overflow with Ellipsis

Another approach to consider is truncating the text altogether and adding ellipses where the string of text hits the container:

This nice thing about using text-overflow is that it is supported universally.

These tend to be the kind of things you sprinkle into code where needed, so they make for nice @mixins:

Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.

Comments

Apparently, overflow-wrap is the new word-wrap as its been removed from the CSS3 spec. I just read about this only a couple of days ago, along with some other interesting proposed typographic properties: http://www.impressivewebs.com/new-css3-text-wrap/ Worth noting: although word-wrap has been removed from spec there is no current browser support for the replacement property!

But before you go rushing into changing all that word-wrap goodness you just added – from the spec: “For legacy reasons, UAs may also accept ‘word-wrap’ as an alternate name for the ‘overflow-wrap’ property.”

the surrounding element must have a specified width or your long url will still break out of the box.

Источник

Word wrap a link so it doesn’t overflow its parent div width [duplicate]

The link text can be very long and it overflows the div when it’s length does exceed the div width. Is there a way to force the link to break and go on the next line when its width exceeds the div width?

7 Answers 7

The following is a cross browser compatible solution:

Yes you need them for cross browser compatibility. I updated my answer and included a working example on jsfiddle.

thanks Hussein for your help. I’ve noticed that in your example there are spaces, here is a fork without spaces jsfiddle.net/wxBxQ unfortunately I have currently access only to browsers supporting word-wrap, so I would have to check with browser not supporting word-wrap

I want to check that it is working with browsers not supporting word-wrap:break-word as I want to make sure the white-space property correctly limit the width for my links that don’t contain white spaces. For that I’ll try with older browsers, but for now I don’t have access to them.

Its also worth noting that word-wrap has been withdrawn from the CSS3 spec: impressivewebs.com/new-css3-text-wrap

If you’re okay with CSS3, there’s a property for that:

Works for Internet Explorer 8+, Firefox 6+, iOS 4.2, Safari 5.1+ and Chrome 13+.

wrap link inside another div with smaller width

   div#permalink_section  
 
here goes a very very long link 
 
   

does not work, for example http://example.com/index?param=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa overflows

or use javascript to truncate the length of the link’s text, replacing the end with «. «

Working example of the JS method: http://jsfiddle.net/fhCYX/3/

thanks, word-wrap:break-word works fine, can’t use the other solutions you proposed because I need to display the whole link

I didn’t have much luck with the solution in the accepted answer, so I tried a different approach. On load, I pad all slashes in the anchor text with spaces: «/» —> » / «. Most links don’t have slashes and so this does nothing, and most links that do have them are hyperlinks, and these look okay with this substitution, and then the links do wrap correctly.

overflow:hidden seems to be the key to making an element of size:auto break-word correctly

That example includes a left float as I was trying to achieve a media-object like layout.

Unfortunately if you try to use table-cell elements it breaks again 🙁

Источник

HTML link text wrapping breaking its border

Trying to write my first website for my new business I came across a problem that I can’t work out. I have a header with 2

.links < max-width: 60%; float: left; font-size: 2.2em; margin: 1% 4.5%; clear: left; >.links a < text-decoration: none; color: black; border: 1px solid black; padding: 1%; >.links a:hover < background:lightblue; >.FMS

Welcome to Stack Overflow! Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. See How to create a Minimal, Complete, and Verifiable example

@MonkeyNuts Did anyone solve your problem? If so, could you please accept the best answer (click the checkmark under the points). That will help other users that come across your question quickly spot the accepted answer and it also gives 15 rep. points to the author (:

3 Answers 3

You could try the following CSS:

In .link div, use width: 60% instead of max-width: 60%. Then use overflow: auto in the FMS div. The overflow: auto in .FMS should cause the .FMS class to fill the remaining space available. If you want the content of the FMS div to be along the right border, then use float: right on the content rather than on the div. You could also switch this, specify a specific width for FMS and then use overflow:auto for the .link div. The order in which the divs appear might matter when using this method. This might not be the answer you are looking for, but I thought I would suggest it.

Источник