CSS「………」などが改行しなくてはみ出る場合の対処法
「………」などが改行しなくてはみ出る場合の対処法
CSS
-------------------------------------------------
word-wrap:break-word;
overflow-wrap : break-word;
-------------------------------------------------
カテゴリー：css
css
【CSS】iphoneでbrタグを含む長文をうまく選択する方法
iphoneでbrタグをまたいで文章を選択すると、希望の文字列より広範囲で四角く選択されてしまう。これはiphoneの使用のよう。
この問題はbrタグを使わず、CSSで改行すると解決できる。
html
-----------------------------
<br>
-----------------------------
↓↓↓↓↓
html
-----------------------------
<span class="br"></span>
-----------------------------
css
-----------------------------
.br:before {
content: "\A";
white-space: pre-wrap;
}
-----------------------------
iphoneのブラウザで文字列を選択できない
iphoneのブラウザで文字ができない現象に遭遇。通常文字列を長タップすると選択およびコピーのポップアップが出るが、それがでなくなる。
出なくなる条件。
以上3つの条件が揃うとコピーができない。文字列の長さを短くしたり、line-heightの値を小さくするとコピーができるようになる。viewportの指定を外せば、タグを含まない長い文字列でも、line-heightが大きい値でもコピーに支障なし。
現象はiphone5s(iOS9.3.2) と iphone6s(iOS9.3.3) で確認。それぞれの端末で選択できなくなるまでの文字数が違う。この違いが、画面の大きさからか、スペックからか、OSのバージョンからなのかは不明。
対症療法として文字列中の適当な箇所になどのタグを入れるとコピーできるようになる。
2016/09/22 追記
原因判明。読み込んでいた二つのcssファイルそれぞれに #content があった。一つ消したら不具合もなくなった。
【CSS】android4.xでposition:fixedで上下左右中央揃え
position:fixedで上下左右中央揃えをする方法をネットで調べた。
-------------------------------
.box1{
position: fixed !important;
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
margin:auto;
width:145px;
height:145px;
}
-------------------------------
しかしandroid4.x系だとうまくいかないらしく自分のはまる。
対策、これでうまくいく。
-------------------------------
.box1{
position: fixed !important;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
-------------------------------
参考；
http://youknow.jp/web/css-position
カテゴリー：css
【JQuery】スマホでhoverを使う
hover を使ったリンクをつくって iPhone で見ると、リンクにタッチした瞬間には hover は反応せずに指を画面から離した瞬間に反応する。
PC上の hover がマウスポインタを置いた瞬間に反応するように、タッチした瞬間にスマホ画面を反応させるには JQuery を使うといい。
Jquery ファイル
/////////////////////////////////////////////////
//PC用 hover 処理。css に hover を記述するとスマホサイトで見たときに
//挙動がおかしくなるので PC 上の挙動もここでつくる
//PC用とスマホ用を上下入れ替えると、android で挙動がおかしくなる。
//android が hover とtouchstart（touchend）のどちらにも反応するためだと思われる。
$('.touch-res').removeClass("touchstyle").addClass("notouchstyle");
$('.touch-res').hover(
function () {//---マウスオーバーの処理
$(this).removeClass("notouchstyle").addClass("touchstyle");
},//---カンマを忘れずに
function () {//---マウスアウトの処理
$(this).removeClass("touchstyle").addClass("notouchstyle");
}
);
//スマホ用。touchstart & touchend で処理。
$('.touch-res').bind({
'touchstart': function(e) {
$(this).removeClass("notouchstyle").addClass("touchstyle");
},
'touchend': function(e) {
$(this).removeClass("touchstyle").addClass("notouchstyle");
}
});
/////////////////////////////////////////////////
//CSSファイル
/////////////////////////////////////////////////
/* JQuery専用なので、htmlファイルには touch-res クラスだけリンクに設定する*/
.touchstyle { background-color:#d9effc;}
.notouchstyle { background-color:transparent;}
/////////////////////////////////////////////////
問題点がひとつあって、iPhone で次のページに進んだ後、戻るボタンでもどると、リンクの色が変わったままになっている。
iPhone だけなら css の擬似クラス :active で、PC上の hover と同じような反応を出すことができる。ただし、android は反応しなくなる。
textareaで一部の文字だけ装飾する
textareaで一部の文字だけ装飾する方法をネットで調べると Jquery を使った方法がいくつか見つかった。しかし自分のしたかったものとはちょっと違った。見つかった方法のソースをいじって自分のやりたかったことができればいいのだが、そこまで詳しくなので、理解するの時間がかかって面倒くさい。
で、タイトルとちょっと違うのだが、html や css で装飾した文字を textarea の文字のように簡単に編集できる方法を発見。やり方も超簡単だったので採用した。
サンプル
この文字は直接編集できます。textarea は使っていません。
html
--------------------------------
<div id="box" contenteditable=true>この文字は直接編集できます。textarea は使っていません。</div>
--------------------------------
css
--------------------------------
#Box {
border: 1px solid #999;
width:300px;
height:100px;
}
.font1 {
color: red;
}
.font2 {
color: blue;
}
.font3 {
font-weight: bold;
}
--------------------------------
大事なのは「contenteditable=true」の部分のみ。これは html5 の属性。たったこれだけで box 内の装飾された文字を、あたかも textarea 内に書かれた文字のように編集できる。
【css】フッターの文字を上下左右ともにセンタリング
フッターの文字を上下左右ともにセンタリングしたときの覚書
左右のセンタリングだけだと、footer にtext-align を指定するだけで簡単だった。上下のセンタリングだけも display: table-cell が有効だった。しかし、footer の width が 100% では、margin:0 auto が効かず、text-align と vertical-align の両立にてこずった...。
css
--------------------------------------------
#footer {
text-align:center; /* footer 内の div を左右中央にする */
border-top: 1px solid #009933;
background: #fff;
width:100%;
height: 30px;
box-sizing: border-box; /* パディングとボーダーを幅と高さに含める */
clear: both; /* ２カラム解除 */
}
#footer > div {
/* text-align:center を有効にするため inline 化 */
display: inline-block;
background: #999; /* 幅を視覚化するために色をつけている */
}
/* 上下のセンタリング */
#footerText {
height: 30px; /* footer と同じ高さを指定 */
display: table-cell;
vertical-align: middle;
}
--------------------------------------------
html
--------------------------------------------
<div id="footer">
<div>
<div id="footerText">フッターの文字</div>
</div>
</div>
--------------------------------------------
カテゴリー：css
【css】white-space: nowrapがずっと改行しない
white-space: nowrap;が改行してほしいところでも改行しない現象に遭遇。
このhtmlコードで
-----------------------------------------------
<table>
<tr>
<td>
<span style="white-space: nowrap;">改行させない１</span>
<span style="white-space: nowrap;">改行させない２</span>
<span style="white-space: nowrap;">改行させない３</span>
</td>
</tr>
</table>
-----------------------------------------------
テーブルの幅があるときこうなっているものを
-----------------------------------------------
改行させない１改行させない２改行させない３
-----------------------------------------------
テーブルの幅がないスマホなどで見たときこう表示させたい
-----------------------------------------------
改行させない１
改行させない２
改行させない３
-----------------------------------------------
しかしこうなる。改行しない。画面の外に文字の一部が出てしまう。
-----------------------------------------------
改行させない１改行させない２改行させない３
-----------------------------------------------
原因は htmlコード自体の改行を行っていなかったため。
実際の htmlコードはこうだった。
-----------------------------------------------
<table>
<tr>
<td>
<span style="white-space: nowrap;">改行させない１</span><span style="white-space: nowrap;">改行させない２</span><span style="white-space: nowrap;">改行させない３</span>
</td>
</tr>
</table>
-----------------------------------------------
<span>～</span>の境目が改行されていなかったため。
次のようにしたら希望通りに改行できた。
-----------------------------------------------
<table>
<tr>
<td>
<span style="white-space: nowrap;">改行させない１</span>（ここ改行）
<span style="white-space: nowrap;">改行させない２</span>（ここ改行）
<span style="white-space: nowrap;">改行させない３</span>（ここ改行）
</td>
</tr>
</table>
-----------------------------------------------
white-space: nowrap;をうまく扱うときは、空白文字を必要な場所にきちんと入れること。
カテゴリー：css
高さの指定がないセル全体をリンクにする
方法はaタグをブロックレベル要素に変更して、高さと幅を100%にするだけ。
<a href="#" style="display:block;width:100%;height:100%;">
このとき親要素の td に高さ指定が必須なのだが、セルの情報量に合わせてセルサイズをブラウザに自動で決めてもらいたいのでセルサイズを指定したくない。必要以上大きくセルの高さをしていすると格好がわるい。
しかし、セルサイズを指定しないと display:block を指定してもセル全体がリンクになってくれない。仮に親要素 td に height:100% と指定してもセル全体のリンクにはならない。px指定でないとダメなよう。
そこで、テーブルの高さを文字の大きさ以下（情報量以下の大きさ）にする。
必要以上にテーブルの高さを広げずに、セル全体をリンクすることができる。
さて、自分の場合こうした上で文字をセルの垂直中央に揃えたかったのだが、うまくいかなかった。
| セル１ | セル２ セル２ セル２ セル２ セル２ |
セル１を垂直中央に置きたかったが、セルをブロックレベル化、 height を 100%にしたため vertical-align: middle も valign="middle" も思い通りに効いてくれない。
そこでdisplay:tableを使う。要素をtableのように横並びに配置させられるので思ったとおりのものができた。
コード
-----------------------------------------------------
<div style="display:table;table-layout:fixed;">
<div style="display:table-row;">
<a href="index.html" onclick="return false"style="display:table-cell;border: 1px solid #d4d4d4; width:200px;height:100%;vertical-align:middle;">セル１</a>
<a href="index.html" onclick="return false"style="display:table-cell;border: 1px solid #d4d4d4; width:200px;height:100%;vertical-align:middle;">セル２<br>セル２<br>セル２<br>セル２<br>セル２</a>
</div>
</div>
-----------------------------------------------------
カテゴリー：css
【CSS】IEでwhite-space: nowrapが効かない。改行されない。
調べてみたら、white-space: nowrapは、IEとの相性が悪く、バグがよくあるらしい。
特定の条件で、nowrapの範囲が特定の要素や文字で始まったり終わったりすると問題が起きる。
自分の場合は、問題の文字で終わらないように、「 」を入れて対処した。
カテゴリー：css