Yii Framework 下拉選單 控件寬度與 option 寬度獨立控制技巧

Yii CHtml::dropDownList() 生成的 <select> 預設寬度由最寬 <option> 決定。本文示範如何通過 htmlOptions 固定選單寬度，並用 CSS 獨立控制選項寬度，實現 UI 精準佈局。

預設行為

選單與選項寬度綁定，長選項會撐破版面。

1. 控制 select 控件寬度：htmlOptions

<td colspan="1">
    <?php echo CHtml::label('新聞來源: ', ''); ?>
    <?php echo CHtml::dropDownList('source',
        $currentSelectSource,
        CHtml::listData($modelSource, 'domain_hash', 'site_name'),
        array(
            'empty' => '-- 全 部 --',
            'style' => 'width:200px;'  // 關鍵：固定 select 寬度
        )
    ); ?>
</td>

效果：下拉框固定 200px，但彈出的選項列表仍由內容決定寬度。

2. 控制 option 選項寬度：CSS

Yii 無直接參數控制 option 寬度，需全局 CSS：

<style>
    form#form option {
        width: 200px;  /* 統一 option 寬度 */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; /* 過長顯示省略號 */
    }
</style>

效果：

選項寬度固定 200px，超出內容以省略號顯示，介面整齊美觀。

進階建議

• 針對特定表單用 #form-id option 避免全局汙染
• 配合 title 屬性在 option 上顯示完整文字：<option title="完整文字">截斷顯示</option>
• Yii 2.0 使用 ActiveField::dropDownList()，options 參數同樣支援 style
• Bootstrap 環境下可直接加 class="form-control" 由框架處理寬度響應式

分離控制 select 與 option 寬度，是打造專業表單體驗的關鍵細節。