2つのインライン要素をつなぎ合わせる

Question

2つのリンクをコンテナに「接着する」必要があります。
.longとは別に、.shortリンクを改行することができます。
理想的には、.longの内容を新しい行に折り返し、.shortの内容を最後の語句.longに「貼り付け」したいと考えています。

CSS：

.container { 
    width: 300px; 
} 

.long, .short { 
    display: inline-block; 
} 

HTML：.longが新しい行にラップすることができますので、

<div class="container"> 
    <a class="long">Here is some long text that can be wrapped to a new line</a> 
    <a class="short">Short</a> 
</div> 

だから、私は、white-space: nowrapを適用することはできません。
.longには2つの異なるリンクがあるため、.shortを配置できません。

どうすればいいですか？

Answer 1

さて、あなただけの彼らにinlineを表示する場合は、リンクが通常のテキストとして振る舞うので、それはreaaaallyロングの場合は長いものは、次の行（またはそれ以降でも1にラップします）、短いものは長いものの最後の単語の直後になります。それらを表示する必要はありませんinline-block

空白を省略したい場合は、あなたのコードにそれらを一緒に接着します。このような;

<a href>long one</a><a href>short one, no space in between</a> 

Answer 2

以下のように、要件に従って、.longと.sortクラスの幅を指定する必要があります。

.container { 
 
    width: 300px; 
 
} 
 

 
.long, .short { 
 
    display: inline-block; 
 
    float:left; 
 
    width:50%; 
 
}

<div class="container"> 
 
    <a class="long">Here is some long text that can be wrapped to a new line</a> 
 
    <a class="short">Short</a> 
 
</div>

Answer 3

アンカーをinline-blockに指定した理由はありますか？そうでない場合はinlineに設定するか、displayプロパティを完全に削除してください。それは、単一の連続した文字列であるかのようにデフォルトではアンカーがインライン表示されます。

.container { 
 
    width: 300px; 
 
} 
 

 
.long, .short { 
 
    display: inline; 
 
}

<div class="container"> 
 
    <a class="long">Here is some long text that can be wrapped to a new line</a> 
 
    <a class="short">Short</a> 
 
</div>

Answer 4

テキストはそう.longあなたは可能性に接着」する.shortを強制するために、最寄りの便利空白で壊れます代わりに非分割領域を使用します。以下の変更が必要とされるであろう

：

• リンクは、テキストが同じ行に

を走るようになりますデフォルトで inlineあり、 .long, .short {display: inline-block;}を削除  

.longと .shortリンク間を追加します。

<div class="container"> 
 
    <a class="long">Here is some long text that can be wrapped to a new line</a>&nbsp;<a class="short">Short</a> 
 
</div>

https://jsfiddle.net/r2asggnd/

、効果の変化を見るフルスクリーンでスニペットを表示してラップするテキストを強制的にウィンドウのサイズを小さくします。

Answer 5

問題は、inline-block要素がテキストの周りに長方形のボックスを作成することです。

はそれが

を役に立てば幸い

.container { 
 
    width: 300px; 
 
} 
 

 
.wrapper { 
 
    display: inline-block; 
 
} 
 

 
.long { 
 
    background-color: lightgreen; 
 
} 
 

 
.short { 
 
    background-color: yellow; 
 
}

<div class="container"> 
 
    <div class="wrapper"> 
 
    <a href="#" class="long">Here is some long text that can be wrapped to a new line</a> 
 
    <a href="#" class="short">Short</a> 
 
    </div> 
 
</div>

：ダウンあなたの.shortクラスをプッシュ...

あなたのような何かを試みることができます