在较小的屏幕上换行

Question

我试图在某个部分断线，只显示在移动屏幕上。

我所取得的成就：要么得到相反的效果，即在大屏幕上断线，而在小屏幕上则不然，无论我使用min-width与否max-width，或者它只是不做任何事情。

这是我要编辑的代码：

HTML：

<p class="text">In this line I would like<br class="brnodisplay"> a break on small screen<span>More info</span></p>

CSS：

.text {
    transition: all 1s ease;
    text-align: left;
    padding-left: 10%;
}

.text:hover {
    color: #fff;
    background: black;
}

.text span {
    display: block;
    float: right;
    clear: both;
    text-align: right;
    padding-right: 10%;
}

是否有可能在特定宽度/设备上“控制”这样的换行符？先感谢您。

关联：

http://jsfiddle.net/8xddb1h7/

Answer 1

您需要min-width在大屏幕（宽度 >= 768px）上使用<br>，标签将被删除（小提琴- 调整右下面板的大小）：

@media only screen and (min-width: 768px) { 
.brnodisplay {
    display: none;
}

顺便说一句 - 不需要!important.