Question

我的网站包含新闻标题列表。在大多数浏览器中，这些链接正确包装，但在谷歌浏览器中，文本超出了它的容器。 Firefox和Chrome的示例如下......

Firefox http://www.mattconnolly.com/Examples/news-firefox.jpg Chrome http://www.mattconnolly.com/Examples/news-chrome.jpg

HTML只是一个ul / li链接列表...

@SpringBootApplication
@EnableSAMLSSO
public class SpringBootSecuritySAMLDemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(SpringBootSecuritySAMLDemoApplication.class, args);
    }

    @Configuration
    public static class MvcConfig extends WebMvcConfigurerAdapter {

        @Override
        public void addViewControllers(ViewControllerRegistry registry) {
            registry.addViewController("/").setViewName("index");
        }
    }

    @Configuration
    public static class MyServiceProviderConfig extends ServiceProviderConfigurerAdapter {
        @Override
        public void configure(ServiceProviderSecurityBuilder serviceProvider) throws Exception {
            serviceProvider
                .metadataGenerator()
                .entityId("localhost-demo")
            .and()
                .sso()
                .defaultSuccessURL("/home")
                .idpSelectionPageURL("/idpselection")
            .and()
                .logout()
                .defaultTargetURL("/")
            .and()
                .metadataManager()
                .metadataLocations("classpath:/idp-ssocircle.xml")
                .refreshCheckInterval(0)
            .and()
                .extendedMetadata()
                .idpDiscoveryEnabled(true)
            .and()
                .keyManager()
                .privateKeyDERLocation("classpath:/localhost.key.der")
                .publicKeyPEMLocation("classpath:/localhost.cert");

        }
    }
}

这里有一些正在应用的CSS ...... ul { 保证金：0; 填充：0; 宽度：100％; }

<ul>
<li>
<a href="http://www.iiwengr.com/2016/05/23/tranmer-returns-to-iiw-as-surveying-technical-specialist/">TRANMER RETURNS TO IIW AS SURVEYING TECHNICAL SPECIALIST</a>
<span class="post-date">May 23, 2016</span>
</li>
<li>
<a href="http://www.iiwengr.com/2016/05/16/jasper-joins-iiw-as-construction-leader/">JASPER JOINS IIW AS CONSTRUCTION LEADER</a>
<span class="post-date">May 16, 2016</span>
</li>
<li>
<a href="http://www.iiwengr.com/2016/05/11/changing-a-citys-narrative-with-a-streetscape/">CHANGING A CITY’S NARRATIVE</a>
<span class="post-date">May 11, 2016</span>
</li>
</ul>

非常感谢任何关于如何获得一致结果的建议！

Answer 1

我不得不去网站找到问题，因为代码中的罪魁祸首实际上没有包含在问题中。

但如果你删除这一位：

#home-widget-three #secondary .widget ul li a:after {
    content:"\a";
    white-space: pre;
}

从style.css的331行看，它在Chrome中也很不错。不确定那段代码应该做什么？

此外，不要同时给li a和li span宽度<100％，而是在右侧给li填充。更清洁，更易维护的imo。

Answer 2

在您的标记中添加display: inline-block和word-break: break-word;：

ul li a {
   display: inline-block;
   word-break: break-word;
}

自动换行在Chrome上的行为与其他浏览器不同

2 个答案: