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>标记将被删除（fiddle - 调整右下方面板的大小）：

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

btw - 不需要!important。

在较小的屏幕上划线

1 个答案: