Html wrap div in link

How to Wrap Words in a Tag with CSS

There are many CSS properties that can be used to control the wrapping and breakpoints and determine how spaces and line breaks must be processed before wrapping.

If you’ve faced the situation when you need to wrap words in a , you can use the white-space property with the «pre-wrap» value to preserve whitespace by the browser and wrap the text when necessary and on line breaks. Also, you’ll need the word-wrap property.

In this snippet, see how to use the properties mentioned above to wrap words in a with a cross-browser method.

Create HTML

html> html> head> title>Title of the document title> head> body> h1>Example h1> div> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. div> body> html>

Add CSS

• Set the white-space property to «pre-wrap». Also, add the -moz- and -o- prefixes.
• Use the word-wrap property with the «break-word» value.

div < white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; >

The result of our code looks like the following.

Example of wrapping words in a element:

html> html> head> title>Title of the document title> style> div < white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; color: lightgreen; > style> head> body> h1>Example h1> div> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. div> body> html>

Result

Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero’s De Finibus Bonorum et Malorum for use in a type specimen book.

Let’s see another example, where we use the CSS overflow-wrap property, which applies to inline elements. It determines whether the browser must add line breaks within an otherwise unbreakable string for preventing the text from overflowing its line box.

In the example below, we wrap not only the word within a element but also the word, which is placed in a within the element.

Example of wrapping words in a element with the CSS word-wrap property:

html> html> head> title>Title of the document title> style> div < width: 100px; border: 1px solid green; padding: 10px; word-wrap: break-word; > span < overflow-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; > style> head> body> h1>Example h1> div> This is a span>loooooooooooooooooooooooooong span> text for example. Here can be a long word, tooooooooooooooo. div> body> html>

Источник

Wrap element in div or link block

Use keyboard or canvas shortcuts to wrap your element in a div or link block.

Once you’ve wrapped the element, the new wrapping element (i.e., the div block) will be automatically selected and expanded in the Navigator panel.

‍Pro tip: You can press Command + Enter (on Mac) or Control + Enter (on Windows) to add a class after wrapping your element in a div block.

How to wrap an element in a link block

Link blocks are similar to div blocks in that they’re commonly used for structure and layout, but the area inside of the link block becomes a link.

To wrap an element in a link block:

1. Select the element you want to wrap on the Designer canvas
2. Press Command + Option + A (on Mac) or Control + Alt + A (on Windows)

To wrap an element in a link block using the on-canvas menu:

1. Right-click the element you want to wrap on the Designer canvas
2. Click Wrap in link block

Once you’ve wrapped the element, the new wrapping element (i.e., the link block) will be automatically selected and expanded in the Navigator panel.

Источник

Wrapping Long URLs and Text with CSS

By default, the white-space property is set to normal . So you might see something like this when trying to force long URL s and other continuous strings of text to wrap:

To force long, continuous strings of text to wrap within the width of our content (or other block-level element, such as and

), we need a different value for the white-space property. Here are our options:

• normal – Default value for the white-space property. Sequences of whitespace are collapsed to a single whitespace. content will wrap at whitespaces according to the width of the element.
• nowrap – Sequences of whitespace are collapsed to a single whitespace. content will wrap to the next line ONLY at explicit
  elements.
• pre – All whitespace is preserved. content will wrap at implicit line breaks. This is the default behavior of the element.
• pre-line – Sequences of whitespace are collapsed to a single whitespace. content will wrap at whitespaces and line breaks according to the width of the element.
• pre-wrap – All whitespace is preserved. content will wrap at whitespaces and line breaks according to the width of the element.
• inherit – Value of white-space inherited from parent element.

In a perfect world, we could simply use white-space:pre-line , like so:

Although the white-space property is supported by all major browsers, unfortunately many of them fail to apply the property to long strings of continuous text. Different browsers will wrap long strings, but they require different white-space values in order to work. Fortunately, we can apply the required values for each browser by including multiple white-space declarations in our pre selector. This is exactly what we are doing with the CSS code solution presented at the beginning of this article.

The comments included in the CSS solution explain which declarations are targeting which browsers. Notice that some of the rules are browser-specific (using vendor-specific prefixes), while others declare standard values from different CSS specifications. The funky word-wrap property is a proprietary Microsoft invention that has been included with CSS 3. And thanks to the CSS forward compatibility guidelines, it’s perfectly fine to include multiple instances of the same property. In a nutshell:

• Unrecognized properties are ignored
• For multiple instances of the same property, only the last rule will be applied

The code solution presented in this article seems to work fine in every browser I have tested, but it doesn’t validate because of the vendor-specific stuff and the crazy Microsoft thing.

For more complete discussion on text wrapping and all the gruesome details, check out Lim Chee Aun’s excellent post on whitespace and generated content ( 404 link removed 2014/03/24). And, for a complete guide to pimping your site’s content, check out my article, Perfect Pre Tags.

Источник

Wrap Long Links with CSS

Developers have loads to think about when creative websites, and much of that is ensuring child elements don’t stretch past the parent width. We worry about images, IFRAMEs, and other popular elements pushing past their parent width, but then we see a basic link with a long URL and we look down, just shaking our heads. Why doesn’t the URL just break?

To prevent that issue, you can apply the following CSS:

Should this be a global setting for A elements, or simply something that we as developers should set? Surely this is an annoyance we shouldn’t have to deal with, right?

Recent Features

How to Create a Twitter Card

Detect DOM Node Insertions with JavaScript and CSS Animations

Incredible Demos

Fancy Navigation with MooTools JavaScript

WebKit Marquee CSS: Bringin’ Sexy Back

Discussion

You have to be carefull when using it in tables, because it causes the table to split the links all the time, it’s annoying. I prefer to set word-wrap on each case, most of time reseting this, is worst than setting.

Chris, that would be true if you set the CSS style on the body / p element. This will only effect links, hence the setting of it on the a element.

I commonly run into this when dealing with dynamic content. I feel it should be automatically set for the anchor tag. We could just implement this in a reset included in the stylesheet that _most_ projects start off with. Double-edge sword I guess.

Actually, I do exactly the opposite. I think you shouldn’t wrap links like that at all. Imagine if you had a link at the end of a sentence that breaks to the next line. Now, you actually have two links. One to the right of your screen, and one to the left. But they are the same link. Confusing and ugly, in my opinion. Better is to white-space: nowrap all the links in a content section, and provide a max-width (which could be dynamic for various screen sizes). And then probably make it visually attractive by letting it fade out or add ellipsis. Like @Symphony shows in the above comment. Breaking a link in two parts feels kinda like breaking a word with a hyphen on a place where it isn’t logical/allowed.

Agree with @Jelmer. A progressive reveal pattern seems most useful. For ease of implementation, we should look not at the tag but using CSS ellip for style and the title attribute as a semantic way to provide additional information for a basic tooltip. Similarly, we could lookup the site title dynamically and embed it where the really-really-long-a-tag-body-text-node-goes, passing more link juice through on the site title, assuming required use of the A href attribute and the link is not a nofollow link.

Consider my case on mobile devices, from where I get 80% of my traffic, I want the client to see the entire link and judge if it’s safe or not. Since screen width is reduced on mobile, breaking the link on two lines doesn’t leave one right of the screen and other to the left, but actually makes it easier to be clicked. This is just for my case, ellipsis doesn’t suit everywhere.

Источник