综合技术

Move tag to new line if it’s content flows out of the first line?

微信扫一扫,分享到朋友圈

Move  tag to new line if it’s content flows out of the first line?
0

I’m trying to achieve the following, move tag to a new line if its content flow from one line to another, so you can see what I mean here http://jsfiddle.net/sNyzX/
Firs example (red) shows situation I have now and second example (orange) shows desired effect, however without that

tag. Can this be achieved with plain html and css, if not jQuery solution will do as well.

Hi there This is some text and this is the link!
Hi there This is some text and
this is the link!

CSS:

#example1 {
    background: red;
    width: 145px;
}

#example2 {
    background: orange;
    width: 145px;
    margin-top: 20px;
}

Problem courtesy of: Ilja

Solution

Add:

a {
    white-space: pre;
}

Solution courtesy of: bookcasey

Discussion

Simply set display property of link to block, it will always move the link to a new line.

#example1 a {
    display: block;
}

You can check out this page to know how display property work: http://www.tutorialrepublic.com/css-tutorial/css-display.php

Discussion courtesy of: Alex

I think you should use

word-break:break-word;

for long word to break into lines.

#example1 {
    background: red;
    width: 145px;
    word-break:break-word;
}

JS Fiddle Demo

Discussion courtesy of: Sachin

Yes, you can!

Just put

#example1 a {
    display: block   
}


jsFiddle here

Discussion courtesy of: Christian

Add this to your style-sheet

#example1 a {
    white-space: nowrap;
}

Discussion courtesy of: panpiper

This recipe can be found in it’s original form on Stack Over Flow
.

阅读原文...


CSS3 Recipes

Amateur Cryptojackers and Apple Macs Emerge as Two Mining Malware Trends for 2018

上一篇

腾讯员工:在KPI面前,用户体验一文不值

下一篇

您也可能喜欢

评论已经被关闭。

插入图片
Move <a> tag to new line if it’s content flows out of the first line?

长按储存图像,分享给朋友