blob: 2b1823a855a35fe86501b499082a0afc0ef9db1b (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
---
title: 文字列の一部が表示されずに見切れる
slug: orphaned/Web/Compatibility_FAQ/Cut_Off_Text.html
tags:
- Compatibility
- Layout
original_slug: Web/Compatibility_FAQ/Cut_Off_Text.html
---
<h2 id="概要">概要</h2>
<p> 検索等のテキストボックス内のプレースホルダーが見切れています。<br>
プレースホルダーの文字列が全て表示できず、途中で見切れている場合があります。</p>
<p> 表示画面</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/9967/0108.png" style="width: 289px; height: 120px; margin-right: 50px; margin-left: 50px;"></p>
<h2 id="要因">要因</h2>
<p> 要因の代表例として以下があります。</p>
<ol>
<li>
<p><strong>表示領域が足りていない </strong><br>
表示領域の<a href="https://developer.mozilla.org/ja/docs/Web/CSS/width">width</a>プロパティの値が表示させるテキストの文字数分のpx数より小さいことで見切れています。<br>
テキストを全て表示させるには、テキストよりも大きな<a href="https://developer.mozilla.org/ja/docs/Web/CSS/width">width</a>プロパティの値を設定する必要があります。</p>
<pre><code><font size="3"> input[type=text] {
margin:0 6px;
<font>width</font>:165px;
} </font></code></pre>
<p> </p>
</li>
</ol>
<h2 id="解決策">解決策</h2>
<p> 各要因の解決策の代表例として以下があります。</p>
<ol>
<li>
<p><strong>表示領域が足りていない</strong><br>
表示領域の<a href="https://developer.mozilla.org/ja/docs/Web/CSS/width">width</a>プロパティを要素のテキストに合わせて、再設定することで正しく表示されます。<br>
表示するテキストが長すぎてテキストボックスを超えてしまう場合は、テキストボックスの横幅の調整も必要となります。</p>
<pre><code><font size="3"> input[type=text] {
margin:0 6px;
<font>width</font>: <strong>200px;</strong>
} </font></code></pre>
<p> </p>
</li>
</ol>
<h2 id="メリット">メリット</h2>
<p> ・少ない調整で正しく表示を行えるようになります。<br>
・要素内のpx指定の変更のみなので、他ブラウザへの影響がありません。</p>
<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p>
|
