如何使用css订购文本？

I have a simple text which in desktop looks like this:

我有一个简单的文本,在桌面上看起来像这样:

Kolor : Niebieski
Rozmiar : S/M

I want this to look like this in mobile:

我想在移动设备上看起来像这样:

Kolor : Niebieski Rozmiar : S/M

Here is the html:

这是html:

<a href="">Kolor : Niebieski<br> Rozmiar : S/M</a>

Here is css I have tried:

这是我尝试过的css:

div br {
  display: none;
}

Unfortunately this does not work, any suggestion what I need to do to get what I want without changing html structure?

不幸的是,这不起作用,任何建议我需要做什么来获得我想要的而不改变html结构?

3 个解决方案

#1

Hide the br on smaller screens:

在较小的屏幕上隐藏br:

@media screen and (max-width: 600px) { /* change this to be the width when you want it to go one one line */
  br {
    display: none;
  }
}

<a href="">Kolor : Niebieski<br> Rozmiar : S/M</a>

I would say that you should keep them on separate lines though as it now doesn't read correctly and looks worse on mobiles

我会说你应该把它们放在不同的线上,因为它现在无法正确读取并且在手机上看起来更糟

#2

Try this :

试试这个 :

div br{
display: inline-block;
}

It should do the trick

它应该做的伎俩

#3

In your HTML you show

在您显示的HTML中

<a href="">Kolor : Niebieski<br> Rozmiar : S/M</a>

while in your CSS you use

而在你使用的CSS中

div br { display: none; }

To hide the <br /> on mobile, you need to target it correctly:

要在移动设备上隐藏
,您需要正确定位它:

a br { display: none; }

To only do it on mobile, you need to put that inside a media query:

要仅在移动设备上执行此操作,您需要将其放入媒体查询中:

@media (max-width: 480px) {
  a br { display: none; }
}

Of course you need to replace the 480px by whatever is the breakpoint between mobile and desktop display.

当然,您需要将移动和桌面显示之间的断点替换为480px。

#1