占位符在primeng中达到输入宽度时断开线

时间:2018-05-14 10:08:45

标签: angular typescript primeng angular-forms

我有一个带有长占位符的输入。

我试图换行,但我找不到合适的解决方案。

我已尝试在占位符文字中添加ApiInterface apiInterface = ApiClientInstagram.getClient().create(ApiInterface.class); Call<InstagramDetail> call = apiInterface.getInstagramDetail(token); Log.d("tag", call.request().url().toString()); call.enqueue(new Callback<InstagramDetail>() { @Override public void onResponse(Call<InstagramDetail> call, Response<InstagramDetail> response) { String code = String.valueOf(response.code()); if (code.equals("200")) { response.body(); } else { Toast.makeText(getApplicationContext(), "Backend Error", Toast.LENGTH_LONG).show(); } } @Override public void onFailure(Call<InstagramDetail> call, Throwable t) { Toast.makeText(getApplicationContext(), t.getMessage(), Toast.LENGTH_LONG).show(); } }); &#10;,但这不起作用。

\n

input placeholder

这是一个stackblitz example

1 个答案:

答案 0 :(得分:1)

该输入需要一些高度来包装整个占位符,以便它可见。样式:: - webkit-input-placeholder或:: placeholder会使它出现在多行上。关闭封装以便进行此样式工作

CSS

::-webkit-input-placeholder,::placeholder {
  position:relative;
  white-space: pre-line;
  word-break: break-all;
  top:-20px;
}

HTML

  <input type="text" [inputStyle]="{'height':'40px'}"  placeholder="Username UsernameUsername  UsernameUsername" />

类别:

import { ViewEncapsulation } from '@angular/core';
...
@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

Demo