PCとスマホで文章を変える方法はあるのでしょうか？

cssでサイズ指定をして、そのサイズの時は設定を変えるという事は可能ですが、
文字も同じように変更は可能なのでしょうか？

具体的にやりたいことは、
・PC => 文字に改行をいれない
・スマホ => 文字に改行をいれる

ということがしたいです。

行動規範の内容に同意します

回答3件

ベストアンサー

はい、可能です。
スマホサイズの場合のみ文字に改行をいれたい場合、スマホサイズ以上になったらBRタグが非表示になるようなCSSを書いて下さい。

HTML
1<html>
2<head>
3<style>
4@media (min-width: 600px) {
5  .responsive-visible {
6    display: none;
7  }
8}
9</style>
10</head>
11<body>
12
13<div>hello. <br class="responsive-visible"> world.</div>
14
15<div class="responsive-visible">スマホ表示中</div>
16
17</body>
18</html>

投稿2017/04/03 05:34

ku__ra__ge

総合スコア4524

Sky_Hat

2017/04/03 07:49

ご回答、ありがとうございます。自分のやりたいことを実現するのに一番簡単な方法であり、一番早く、回答して頂けたのでベストアンサーとさせて頂きました。

行動規範の内容に同意します

質問者さんの実現したいことは、javascript, jQueryならば以下のように行うことができると思いますが、いかがでしょうか？
javascript

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11    </style>
12</head>
13<body>
14<div id="box1">
15    テキストテキストテキスト<br>
16    テキストテキストテキスト<br>
17    テキストテキストテキスト
18</div>
19<script>
20    let text = "";
21
22    document.addEventListener("DOMContentLoaded", function () {
23        text = document.getElementById("box1").innerHTML;
24        document.getElementById("box1").innerHTML = (window.matchMedia("(max-width: 800px)").matches ? text : text.replace(/<br>/g, ""));
25    });
26
27    window.matchMedia("(max-width: 800px)").addListener(function () {
28        document.getElementById("box1").innerHTML = (window.matchMedia("(max-width: 800px)").matches ? text : text.replace(/<br>/g, ""));
29    });
30</script>
31</body>
32</html>

jQuery

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11    </style>
12</head>
13<body>
14<div id="box1">
15    テキストテキストテキスト<br>
16    テキストテキストテキスト<br>
17    テキストテキストテキスト
18</div>
19<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
20<script>
21    $(function () {
22        let text = $("#box1").html();
23        $(window).on("load resize", function () {
24            (window.innerWidth > 800) ? $("#box1").html(text.replace(/<br>/g, "")) : $("#box1").html(text);
25        })
26    });
27</script>
28</body>
29</html>

投稿2017/04/03 05:50

編集2017/04/03 08:00

s8_chu

総合スコア14731

Sky_Hat

2017/04/03 07:55 編集

ご回答、ありがとうございます。 javascript、jQueryを学習中でしたので、こちらの方法は大変参考になりました。ありがとうございます！ただ今回は、自分のやりたいことに最短距離で辿り着く方法を提示して頂いた、他の方をベストアンサーとさせて頂きました。大変、申し訳ありません。今回は改行をどうにかしたかったのですが、タイトル通りに文章を変更するとなった場合には有効ですので、応用力は上かと思います。なので、こちらの方法も覚えておこうかと思います。

Sky_Hat

2017/04/03 07:58

javascriptの方もjQueryの方も試しまして、どちらも上手く行きました。 javascript、jQueryを使用しての実現方法を教えて頂きありがとうございます！

行動規範の内容に同意します

わたくしの場合は、出来るだけソースを汚したくないので、

CSS
1@media only screen and (max-width : 767px) {
2  #box p span {
3    display:block;
4  }
5}

HTML
1<div id="box">
2  <p>テキスト<span>改行させるところを囲む</span></p>
3</div>

のようにしています。

投稿2017/04/03 06:48

LibertyBell3

総合スコア1084

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

PCとスマホで文章を変える方法はあるのでしょうか？

関連した質問