小屏幕上的断线

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%;
}

在特定的 widths/devices 上甚至可以 "control" 像这样换行吗？提前谢谢你。

Link:

http://jsfiddle.net/8xddb1h7/

Answer 1

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

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

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

小屏幕上的断线

Breaking lines on smaller screen

html

css

media-queries