突破小屏幕上长字

我有这样一行：突破小屏幕上长字

<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>

这是一个代码元素的一部分。

我想要做的是查看线小屏幕（没有水平滚动）。

我试图在http://www.w3schools.com/css/css3_text_effects.asp的帮助下同时对<pre>和<code>进行样式设置 - 并且仍然不会中断！

code { 
    width: 90%; 
    min-width: 200px; 
    background-color: white; 
    border: 1px solid black; 
    margin: auto; 
    font-size: 1rem; 
    /* ... and now what? */ 
}

来源

2016-08-23 A. Meshu

使用overflow-wrap CSS属性应该解决您的问题

code { 
    overflow-wrap: break-word; 
    word-wrap: break-word; 

    -ms-word-break: break-all; 

    /* This is the dangerous one in WebKit, as it breaks things wherever */ 
    word-break: break-all; 

    /* Instead use this non-standard one: */ 
    word-break: break-word; 
}

来源

2016-08-23 20:17:05 happymacarts

附加信息我从[caniuse.com]获取了一些信息（https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/） – happymacarts

确定它的工作完美当它是一条线时。但如果有几行（在pre元素内部查看）？当它不止一行时，似乎css不会影响小屏幕。 –

如果我没有错误元素定义是说它已预先格式化。 – happymacarts

所有你需要的是补充：word-wrap: break-word;
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-wrap

来源

2016-08-23 19:51:57

请不要引用W3Schools的是有据可查的，而不是我推荐的最准确的来源[链接]（https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap） – happymacarts

@happymacarts是的，但如果你小号结束他们的Mozzila开发文档链接，大多数不知情的人会认为，这将只适用于Firefox浏览器 –

@DermannDekovic也许这可以解释为帖子的一部分，感谢编辑，顺便说一句。 – dckuehn

code { 
    overflow-wrap: break-word; 
}

从Mozzila Dev documentation

这是工作在：

谷歌浏览器4.0+
微软边缘5.5+
火狐Mozzila 3.5+
的Safari 3.1+
歌剧10.5+

来源

2016-08-23 20:03:31 dckuehn

对不起刚刚复制您的帖子。我离开它，因为它是更深一点 – happymacarts

@happymacarts没有问题，它是更彻底。 – dckuehn

突破小屏幕上长字

回答

相关问题