如何在不使用 中断的情况下制作特定的线截止点，因为它无法响应设计

Question

我们的营销对事物的外观非常明确。我得到了关于特定部分的线条必须是什么样子的屏幕截图。

目前代码如下所示：

HTML:

<div class="call-to-action">
    <p>Thank you for using the Saga @ViewData["LegalReference"] fee calculator. All details are checked by<br />our trained solicitors at point of instruct. To instruct us or for a written quotation<br />please click on the Buy Now button or call one of our UK based advisers on <br/><span><strong>@ViewData["ContactNumber"]</strong> quoting <strong>@ViewData["ProductReference"]</strong></span></p>
    <p>Lines are open 8am &ndash; 8pm Monday to Friday, 9am &ndash; 5pm Saturday and 10am &ndash; 2pm Sunday. </p>
</div>

CSS:

.call-to-action p 
{
    margin:0em -1em 0em -1em;
}
.call-to-action p + p 
{
    margin: 0em 7.5em 0em 6.5em;
}

之所以使用break( )是因为@ViewData["LegalReference"]可以是单词'conveyancing'，是一个长单词，让单词往下跳，行必须往下跳单词（在 'by'、'quotation'、'on' 之后）

问题：由于网站在移动设备上响应   它开始看起来像这样

所以如果我尝试使用边距而不是  。

HTML:

<div class="call-to-action">
    <p>Thank you for using the Saga @ViewData["LegalReference"] fee calculator. All details are checked by our trained solicitors at point of instruct. To instruct us or for a written quotation please click on the Buy Now button or call one of our UK based advisers on <span><strong>@ViewData["ContactNumber"]</strong> quoting <strong>@ViewData["ProductReference"]</strong></span></p>
    <p>Lines are open 8am &ndash; 8pm Monday to Friday, 9am &ndash; 5pm Saturday and 10am &ndash; 2pm Sunday. </p>
</div>

CSS:

.call-to-action p 
{
    margin:0em 1.4em 0em 0em;
}
.call-to-action p + p 
{
    margin: 0em 7.5em 0em 6.5em;
}

我明白了：

我怎样才能让行在特定的单词 ('by','quotation','on') 上断开，这样在响应时它就不会打破他们会填满全长？

Answer 1

使用媒体查询，用于较小的分辨率，您可以在其中隐藏  ，例如

@media screen and (max-width: 600px) {
   br { display: none }
}

这将确保自然换行仅取决于元素宽度

示例：http://codepen.io/anon/pen/ogqzVr

Answer 2

一种可能的解决方法是在桌面模式下将段落的white-space值改为pre-line，在小屏幕下重新设置回normal：

p {
  white-space: pre-line;
}

@media (max-width: 767px) {
  p { white-space: normal; }
}

<p>Thank you for using the Saga LegalReference fee calculator. All details are checked by
  our trained solicitors at point of instruct. To instruct us or for a written quotation
  please click on the Buy Now button or call one of our UK based advisers on
  <span><strong>ContactNumber</strong> quoting <strong>ProductReference</strong></span></p>

您还可以通过在特定屏幕尺寸中添加 display: none; 来隐藏   元素。

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

<p>Thank you for using the Saga LegalReference fee calculator. All details are checked by <br /> our trained solicitors at point of instruct. To instruct us or for a written quotation <br /> please click on the Buy Now button or call one of our UK based advisers on <br /> <span><strong>ContactNumber</strong> quoting <strong>ProductReference</strong></span></p>

Answer 3

使用不间断空格   表示您不想中断的文本 phone 不。

如何在不使用 <br/> 中断的情况下制作特定的线截止点，因为它无法响应设计

How to make specific line cut-off points without using <br/> breaks because it fails responsive design

html

css

responsive-design