Tailwindcssのポップオーバーのテキスト表示について

2026年2月3日2026年2月17日

Tailwindcssのポップオーバーを弄っているとあることに気が付いた。

HTML

<?php
$sentence = 'ある日のこと'.PHP_EOL.'本日は天気も良く、絶好のお散歩日和だと私は考えます。'.PHP_EOL.'ですが、ペットを置き去りにして1人で外出するのも気が引けてしまう。'.PHP_EOL.'なので、本日も1人で読書三昧することとします。'; 
?>

<button popovertarget="my-popover" class="rounded bg-blue-500 text-white m-2 p-2">
    開く
</button>

<div popover id="my-popover"
  class="starting:open:opacity-0 fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
         bg-white text-black p-6 rounded-xl shadow-xl">
         <pre>
            <?= htmlspecialchars($sentence) ?>
        </pre>
    <button popovertarget="my-popover" popovertargetaction="hide"
        class="block right-0 float-right m-4 p-2 rounded bg-blue-500 text-white hover:bg-blue-600">閉じる
    </button>
</div>

<?php
$sentence = 'ある日のこと'.PHP_EOL.'本日は天気も良く、絶好のお散歩日和だと私は考えます。'.PHP_EOL.'ですが、ペットを置き去りにして1人で外出するのも気が引けてしまう。'.PHP_EOL.'なので、本日も1人で読書三昧することとします。'; 
?>

<button popovertarget="my-popover" class="rounded bg-blue-500 text-white m-2 p-2">
    開く
</button>

<div popover id="my-popover"
  class="starting:open:opacity-0 fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
         bg-white text-black p-6 rounded-xl shadow-xl">
         <pre>
            <?= htmlspecialchars($sentence) ?>
        </pre>
    <button popovertarget="my-popover" popovertargetaction="hide"
        class="block right-0 float-right m-4 p-2 rounded bg-blue-500 text-white hover:bg-blue-600">閉じる
    </button>
</div>

あれ？なんで1行目だけインデントがずれてるの？

しかも過剰に。

$sentence に書いたように文頭にインデントや空白なんて入れていない。

この問題を解決することにしました。

ポップオーバー＋<pre>タグがいけない

HTML

<?php
$sentence = 'ある日のこと'.PHP_EOL.'本日は天気も良く、絶好のお散歩日和だと私は考えます。'.PHP_EOL.'ですが、ペットを置き去りにして1人で外出するのも気が引けてしまう。'.PHP_EOL.'なので、本日も1人で読書三昧することとします。'; 
?>

<pre>
    <?= htmlspecialchars($sentence) ?>
</pre>

<?php
$sentence = 'ある日のこと'.PHP_EOL.'本日は天気も良く、絶好のお散歩日和だと私は考えます。'.PHP_EOL.'ですが、ペットを置き去りにして1人で外出するのも気が引けてしまう。'.PHP_EOL.'なので、本日も1人で読書三昧することとします。'; 
?>

<pre>
    <?= htmlspecialchars($sentence) ?>
</pre>

当たり前ですが、<pre>タグをポップオーバー外に設置すれば、左揃えで表示されます。

なので、ポップオーバー特有の現象です。

trim($sentence,” \n\r\t\v\x00″)
mb_convert_kana($sentence, “s”, ‘UTF-8’);

等、やってみましたが、ポップオーバー内の$sentenceに対して空白処理をしても意味がない。

DevToolで確認したら、前後に大量の空白が入っていた。

これをどうにかできないものか。

CSSに空白除去（trim）するプロパティはないのか？

探してみると、CSSに text-spacing-trim というプロパティを発見。

だが、よく読んでいると空白除去ではなく、日本語等をどこで改行するかというものらしい。

他をあたると、white-space-trim というプロパティがあるらしいが

仕様書は 3 つ目（すなわち white-space-trim）の構成要素を定義していますが、これは今のところどのブラウザーでも実装されていません。

引用：white-space

なんとorz

実装しておいてほしかったなぁ・・・

ということでCSSでは対応できそうにありませんでした。

最後の砦：JavaScriptで空白除去

もうこれは仕方ない。

JavaScriptで空白除去を行うことにしました。

HTML

<?php
$sentence = 'ある日のこと'.PHP_EOL.'本日は天気も良く、絶好のお散歩日和だと私は考えます。'.PHP_EOL.'ですが、ペットを置き去りにして1人で外出するのも気が引けてしまう。'.PHP_EOL.'なので、本日も1人で読書三昧することとします。'; 
?>

<button popovertarget="my-popover" class="rounded bg-blue-500 text-white m-2 p-2">
    開く
</button>

<div popover id="my-popover"
  class="starting:open:opacity-0 fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
         bg-white text-black p-6 rounded-xl shadow-xl">
        <pre id="pop-text" class="text-left whitespace-pre-wrap">
            <?= htmlspecialchars($sentence); ?>
        </pre>
    <button popovertarget="my-popover" popovertargetaction="hide"
        class="block right-0 float-right m-4 p-2 rounded bg-blue-500 text-white hover:bg-blue-600">閉じる
    </button>
</div>

<?php
$sentence = 'ある日のこと'.PHP_EOL.'本日は天気も良く、絶好のお散歩日和だと私は考えます。'.PHP_EOL.'ですが、ペットを置き去りにして1人で外出するのも気が引けてしまう。'.PHP_EOL.'なので、本日も1人で読書三昧することとします。'; 
?>

<button popovertarget="my-popover" class="rounded bg-blue-500 text-white m-2 p-2">
    開く
</button>

<div popover id="my-popover"
  class="starting:open:opacity-0 fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
         bg-white text-black p-6 rounded-xl shadow-xl">
        <pre id="pop-text" class="text-left whitespace-pre-wrap">
            <?= htmlspecialchars($sentence); ?>
        </pre>
    <button popovertarget="my-popover" popovertargetaction="hide"
        class="block right-0 float-right m-4 p-2 rounded bg-blue-500 text-white hover:bg-blue-600">閉じる
    </button>
</div>

JavaScript

document.addEventListener('DOMContentLoaded', function () {
  const text = document.getElementById('pop-text');
  text.textContent = text.textContent.trim();
});

document.addEventListener('DOMContentLoaded', function () {
  const text = document.getElementById('pop-text');
  text.textContent = text.textContent.trim();
});