"tagsinput"の表示方法を教えてください。

Question

私はJqueryの "tagsinput"を使用して、ユーザが入力フィールドにタグを作成できるようにしています。

私は、インラインではなく縦書きのタグを表示したいと考えています。
「1300x1300」のように入力すると、入力が100％の幅をカバーしていないように見えます。

どうすればこの問題を解決できますか？

HTML

<table> 
    <tr> 
    <td class="oppningarTd"> 
     <input type="text" class="oppningar" data-role="tagsinput" multiple="true" /> 
    </td> 
    </tr> 
</table> 

CSS @ CBroeさんのコメントに

.bootstrap-tagsinput { 
    background-color: #fff; 
    border: 1px; 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
    color: #555; 
    vertical-align: middle; 
    width: 100%; 
    cursor: text; 
    white-space: pre; //Just trying something 
} 

td.oppningarTd { 
    border: 1px solid black; 
    background: white; 
    text-align: center; 
    width: 200px !important; 
} 

input.oppningar { 
    width: 100% !important; 
    text-align: center; 
} 

FIDDLE
https://jsfiddle.net/Lh4jy9d4/151/

Answer 1

おかげで、私はCHAに成功しましたプラグインのCSSをngeします。

.bootstrap-tagsinput { 
    background-color: white; 
    border: 0px; 
    width: 100%; 
    cursor: text; 
} 
.bootstrap-tagsinput input { 
    border: none; 
    box-shadow: none; 
    outline: none; 
    background-color: transparent; 
    padding: 0; 
    margin: 0; 
} 
.bootstrap-tagsinput.form-control input::-moz-placeholder { 
    color: #777; 
    opacity: 1; 
} 
.bootstrap-tagsinput.form-control input:-ms-input-placeholder { 
    color: #777; 
} 
.bootstrap-tagsinput.form-control input::-webkit-input-placeholder { 
    color: #777; 
} 
.bootstrap-tagsinput input:focus { 
    border: none; 
    box-shadow: none; 
} 
.bootstrap-tagsinput .tag { 
    margin: 4px; 
    color: white; 
    display: block; 
} 
.bootstrap-tagsinput .tag [data-role="remove"] { 
    float: right; 
    cursor: pointer; 
    color: red; 
} 
.bootstrap-tagsinput .tag [data-role="remove"]:after { 
    content: "x"; 
    padding: 0px 2px; 
} 
.bootstrap-tagsinput .tag [data-role="remove"]:hover { 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 
} 
.bootstrap-tagsinput .tag [data-role="remove"]:hover:active { 
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); 
}