Jak mogę wyświetlić tekst na wielu liniach, jeśli ekran użytkowników jest mniejszy niż rozmiar tekstu.

Ponieważ stoi teraz, jeśli użytkownik ma ekran o niskiej szerokości Niektóre tekst, brakuje z ekranu.

    .column {
      box-sizing: inherit;
      display: inline-block;
      margin-bottom: 0em;
      margin-top: 0em;
      vertical-align: middle;
      width: 100%;
    }
    
    .margin-top {
      margin-top: 1.6rem;
    }
    
    .centered {
      box-sizing: inherit;
      text-align: center;
    }
    
    .btn {
      -webkit-tap-highlight-color: transparent;
      background-color: #00bd9a;
      border-radius: 2px;
      box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px -2px;
      box-sizing: inherit;
      color: white;
      cursor: pointer;
      display: inline-block;
      height: 42px;
      letter-spacing: 0.5px;
      line-height: 42px;
      pointer-events: all;
      position: relative;
      text-decoration-line: none;
      text-transform: uppercase;
      vertical-align: middle;
      width: 80%;
    }
<div class="column">
  <div class="margin-top centered">
    <a class="btn" href="#" style="">
        Text Here
      </a>
   </div>
</div>
1
Fuad Hasan 5 czerwiec 2018, 08:58

4 odpowiedzi

Najlepsza odpowiedź

Dodaj height:auto do klasy btn

.column {
      box-sizing: inherit;
      display: inline-block;
      margin-bottom: 0em;
      margin-top: 0em;
      vertical-align: middle;
      width: 100%;
    }
    
    .margin-top {
      margin-top: 1.6rem;
    }
    
    .centered {
      box-sizing: inherit;
      text-align: center;
    }
    
    .btn {
      -webkit-tap-highlight-color: transparent;
      background-color: #00bd9a;
      border-radius: 2px;
      box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px -2px;
      box-sizing: inherit;
      color: white;
      cursor: pointer;
      display: inline-block;
      height: auto;
      letter-spacing: 0.5px;
      line-height: 42px;
      pointer-events: all;
      position: relative;
      text-decoration-line: none;
      text-transform: uppercase;
      vertical-align: middle;
      width: 80%;
    }
<div class="column">
  <div class="margin-top centered">
    <a class="btn" href="#" style="">
        Text Here
      </a>
   </div>
</div>
3
Hiren Vaghasiya 5 czerwiec 2018, 06:03

Od klasy .btn ma stałą wysokość 42px, nowa linia nie będzie wyświetlana, ponieważ przeleci z elementu. Możesz usunąć atrybut wysokości z CSS i po prostu użyj <br> jak tak.

    .column {
      box-sizing: inherit;
      display: inline-block;
      margin-bottom: 0em;
      margin-top: 0em;
      vertical-align: middle;
      width: 100%;
    }
    
    .margin-top {
      margin-top: 1.6rem;
    }
    
    .centered {
      box-sizing: inherit;
      text-align: center;
    }
    
    .btn {
      -webkit-tap-highlight-color: transparent;
      background-color: #00bd9a;
      border-radius: 2px;
      box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px -2px;
      box-sizing: inherit;
      color: white;
      cursor: pointer;
      display: inline-block;
      /*height: 42px;*/
      letter-spacing: 0.5px;
      line-height: 42px;
      pointer-events: all;
      position: relative;
      text-decoration-line: none;
      text-transform: uppercase;
      vertical-align: middle;
      width: 80%;
    }
<div class="column">
  <div class="margin-top centered">
    <a class="btn" href="#" style="">
        Text<br>Here
      </a>
   </div>
</div>
0
josephting 5 czerwiec 2018, 06:02

Wystarczy użyć właściwości Flex do klasy przycisku Przykład

a.btn { display: flex; justify-content: center; }

0
Mehraj Khan 5 czerwiec 2018, 06:04

Użyj poniższych CSS, aby owinąć tekst i musi odpowiednio dostosować wysokość i szerokość.

white-space: pre-wrap; /* css-3 */    
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */    
white-space: -o-pre-wrap; /* Opera 7 */    
word-wrap: break-word; /* Internet Explorer 5.5+ */
0
Suhani Aneja 5 czerwiec 2018, 06:12