Question

我在离子应用程序中添加聊天功能。我已经成功添加了聊天功能，但问题是每当我输入一条长消息时它都会退出视图。我需要在视图中使用文本。我不擅长CSS。任何帮助将不胜感激。

这是我的.html文件

<ion-header>

  <ion-navbar>
    <ion-title>{{teamName}}</ion-title>
  </ion-navbar>

</ion-header>


<ion-content >

  <div class="message-wrap">
    <div *ngFor="let message of messages"
     [class]="message.username == username ? 'message left' : 'message right'"
    >
      <img class="user-img" alt="" src="http://www.newsshare.in/wp-content/uploads/2017/04/Miniclip-8-Ball-Pool-Avatar-16.png">

        <div class="msg-detail">
          <div class="msg-info">
            <p>
             {{ message.username }}
            </p>
           </div>
          <div class="msg-content">
             <span class="triangle"></span>
              <p class="line-breaker ">{{ message.message }}</p>
          </div>
          <!-- <div class="messageContent">{{ message.time }}</div> -->
          <!-- <ion-datetime class="username" displayFormat="MMM DD, h:mm A" [(ngModel)]="message.time"></ion-datetime> -->
        </div>

    </div>
  </div>

</ion-content>

<ion-footer>
  <ion-toolbar>
    <div id="footer">
      <div class="elem"><ion-textarea type="text" placeholder="Enter message here....." [(ngModel)]="message"></ion-textarea></div>
      <div class="elem"><button ion-button icon-only (click)="sendMessage()"><ion-icon name="send"></ion-icon> </button></div>
    </div>
  </ion-toolbar>
</ion-footer>

这是我的.scss文件

page-hotel-detail{


  $userBackgroundColor: #387ef5;
  $toUserBackgroundColor: #fff;


  ion-content .scroll-content {
    background-color: #f5f5f5;
  }


  .elem button {
      border-radius: 0;
      margin: 0;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }
  .elem {
    position: relative;
    min-width: 50px;
  }
  div#footer div.elem:first-child {
      flex-grow: 1;
  }
  div#footer {
      display: flex;
      flex-direction: row;
      align-items: stretch;
  }

  ion-input{
    padding-left: 15px;
    font-size: 125%;
  }
  ion-toolbar {
    margin: 0;
    padding: 0!important;
  }
  .message:after {
    content: '';
    display: block;
    clear: both;
  }
  .messageLeft {
    float: left;
  }
  .messageRight {
    float: right;
  }

  .message.special .innerMessage .messageContent{
    background: white;
    display: inline-block;
    padding: 0 10px;
  }

  .message.special .innerMessage:before{
    content: '';
    height: 2px;
    background: #eee;
    display: block;
    top: 50%;
    position: absolute;
    left: 0;
    width: 100%;
    z-index: -1;
  }

  .message.special .innerMessage{
    background: transparent;
    color: black;
    font-size: 80%;
    width: 100%;
    float: none;
    text-align: center;
    position: relative;
  }


    .message-wrap {
    padding: 0 10px;
    .message {
      position: relative;
      padding: 7px 0;
      .user-img {
        position: absolute;
        border-radius: 45px;
        width: 45px;
        height: 45px;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.36);
      }

      .msg-detail {
        width: 100%;
        display: inline-block;
        p {
          margin: 0;
        }
        .msg-info {
          p {
            font-size: .8em;
            color: #888;
          }
        }

        .msg-content {
          position: relative;
          margin-top: 5px;
          border-radius: 5px;
          padding: 8px;
          border: 1px solid #ddd;
          color: #fff;
          width: auto;

          span.triangle {
            background-color: #fff;
            border-radius: 2px;
            height: 8px;
            width: 8px;
            top: 12px;
            display: block;
            border-style: solid;
            border-color: #ddd;
            border-width: 1px;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            position: absolute;
          }
        }

      }
    }

    .message.left {
      .msg-content {
        background-color: $toUserBackgroundColor;
        float: left;
      }
      .msg-detail {
        padding-left: 60px;
      }
      .user-img {
        left: 0;
      }
      .msg-content {
        color: #343434;
        span.triangle {
          border-top-width: 0;
          border-right-width: 0;
          left: -5px;
        }
      }

    }

    .message.right {
      .msg-detail {
        padding-right: 60px;
        .msg-info {
          text-align: right;
        }
      }
      .user-img {
        right: 0;
      }
      ion-spinner {
        position: absolute;
        right: 10px;
        top: 50px;
      }
      .msg-content {
        background-color: $userBackgroundColor;
        float: right;
        span.triangle {
          background-color: $userBackgroundColor;
          border-bottom-width: 0;
          border-left-width: 0;
          right: -5px;
        }
      }

    }

  }
}

Answer 1

通过添加此

来解决问题

 width:200px;
 word-wrap: break-word;

在css类

中

离子应用程序文本与聊天应用程序一起离开视图屏幕

1 个答案: