Question

如何在移动设备上设置自动换行符？目前我的代码如下：的 HTML

<div class="container-fluid bg-1 text-center">
    <h2>MessageOfTheDay</br>
    </br></h2>
    <p style="margin-bottom: 100px;">SOME LOREMIPSUMDOLORSITAMET,CONSECTETUR</p>
    <h1 style="margin-bottom: 100px;">XXXXXX</br>
    SOME LOREMIPSUMDOLORSITAMET,CONSECTETURSOME LOREMIPSUMDOLORSITAMET,CONSECTETUR</br>
    SOME LOREMIPSUMDOLORSITAMET,CONSECTETURSOME LOREMIPSUMDOLORSITAMET,CONSECTETURSOME LOREMIPSUMDOLORSITAMET,CONSECTETUR</h1>    
</div>

CSS

.bg-1{ 
background-color: black;
background-size: cover;
color: #ffffff;
height: auto; 
min-height:620px;
padding:10px;
margin-top:0px;}

body {
    font: 20px "Montserrat", sans-serif;
    color: #f5f6f7;}

p {font-size: 20px;}

.margin {margin-bottom: 10px;}

h1,h2,h3{    
    margin-top: 0px;
    margin-bottom: 0px;}

.container-fluid{
    padding-top: 20px;
    padding-bottom: 0px;}

h1{font-size: 50px;}

如何修复截断文字？我想在手机上设置自动刹车线。

Image

Answer 1

这将是一个Janky修复，但这应该工作... Bootstrap允许我们显示/隐藏基于屏幕大小的信息与内置媒体查询...所以如果你想在特定的添加休息在文中指出，您可以执行以下操作：

<div class="visible-xs"><br /><br /></div>

或者这可能会起作用，不确定如下，所以试一试，让我们知道它是否适合你：

<br class="visible-xs" />

bootstrap中的“visible-xs”类只有在屏幕大小小于768px时才能使内容可见...替代方案是“hidden-xs”，它隐藏了较小显示器上的内容。 :)快乐的编码！

Answer 2

您可以在CSS中使用媒体查询来执行此操作。你可以给出更高元素，类或id的元素，然后在屏幕小于一定大小时将其宽度设置为100％并将其显示为inline-block或block（或大于一定的大小。）

使用此代码，每个.element的宽度为100％，屏幕尺寸为600px或更小。如果您希望屏幕大于或等于600px，那么您可以使用min-width: 600px代替。

@media (max-width: 600px) {
  .element {
    display: inline-block;
    width: 100%;
  }
}

Answer 3

<div class="container-fluid bg-1 text-center">
    <h2>MessageOfTheDay</br>
    </br></h2>
    <p style="margin-bottom: 100px;" class='workdBreak'>SOME LOREMIPSUMDOLORSITAMET,CONSECTETUR</p>
    <h1 style="margin-bottom: 100px;">XXXXXX</br>
<span class='workdBreak'>
    SOME LOREMIPSUMDOLORSITAMET,CONSECTETURSOME LOREMIPSUMDOLORSITAMET,CONSECTETUR</br>
    SOME LOREMIPSUMDOLORSITAMET,CONSECTETURSOME LOREMIPSUMDOLORSITAMET,CONSECTETURSOME LOREMIPSUMDOLORSITAMET,CONSECTETUR</h1>    
</div>
</span>

 @media only screen and (max-width : 480px) {
      .workdBreak{
        word-wrap:break-word;
      }
    }

如果它大于容器的宽度，则使用word-wrap css属性来破坏单词。

http://www.w3schools.com/cssref/css3_pr_word-wrap.asp http://www.w3schools.com/cssref/css3_pr_word-break.asp

Bootsrap媒体查询

/ ==========移动优先方法========== /

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}



/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

}

Bootstrap响应移动设备

3 个答案: