こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

このようなCSS指定はできますか?

以下のようなスペース区切りの文字列があります。
これらを単語を途中で改行させず、単語の頭から改行させる
CSSの指定方法はありますでしょうか?
単語をspanで囲みnowrapを使ったのですが、単語の途中で改行
されないかわりに画面からはみ出してしまいました。
どうかよろしくお願いいたします。


あああああ いいいいい ううううう えええええ

投稿日時 - 2017-05-07 12:13:16

QNo.9326335

困ってます

質問者が選んだベストアンサー

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
div{
width:150px;
background:#F4DBDC;
}

div>span{
white-space:nowrap;
}
div>span:nth-of-type(n+2)::before{
content: "";
display: block;
}
</style>
</head>
<body>

<div>
<span>あああああ</span><span>いいいいい</span><span>ううううう</span><span>えええええ</span>
</div>
</body>

投稿日時 - 2017-05-07 12:46:31

お礼

ありがとうございました!

投稿日時 - 2017-05-07 13:00:47

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

追伸

普通はpなりdivなりで囲んで最初からブロック要素になるようにするような気がする・・・

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
div{
width:150px;
background:#F4DBDC;
}

</style>
</head>
<body>

<div>
<p>あああああ</p><p>いいいいい</p><p>ううううう</p><p>えええええ</p>
</div>
</body>

投稿日時 - 2017-05-07 12:50:39

お礼

ありがとうございました!

投稿日時 - 2017-05-07 13:00:56

あなたにオススメの質問