Question

<h3 class="views-field-title clickable-link">
    <a href="/article/elektro-elektroniker-energie">
       Elektro Rider Electrotechniker Energy and Smarhome Technics 
    </a>
</h3>

这是我从Drupal网页上的视图中获取的HTML代码。我无法编辑它但我可以应用CSS。（我只是前端访问）当我最小化页面时，这个标题不会自动缩短，因此，我试图插入一个换行符并使它成为。

Elektro Rider Electrotechniker 能源和Smarhome技术

看起来像这样。可以用CSS做到吗？还是jquery？

不是：如果我可以编辑HTML，那么我会添加另一个span类

Elektro Rider Electrotechniker <span class="new">Energy and Smarhome Technics<span/>

使用CSS很容易插入换行符。

Answer 1

确保没有空白区域：nowrap。如果你有它改变它nowrap正常。即便如此，文本也会适应屏幕。

另一种选择是在h3上使用最大宽度的媒体查询，以便在您想要的位置强制换行。＆＃34;白色空间：nowrap;＆＃34;会使这无用，所以检查标签＆＃34; h3＆＃34;和＆＃34; a＆＃34;没有这个属性。

@media screen and (max-width: 1000px) {
  h3 {
    max-width: 300px;
    }
}

https://jsfiddle.net/k9nbaf14/

如何使用css将行换行插入<h3>？

1 个答案: